396316021
/
pet_uni
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修复样式问题

master
396316021 2 years ago
parent
9dc531e67a
commit
09885bd039
6 changed files with 762 additions and 8 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      pages/ChatDetail/index.vue
  2. 9
      pages/Index/components/OrderPage/index.vue
  3. 428
      pages/OrderDetail/components/index.scss
  4. 313
      pages/OrderDetail/index.vue
  5. 2
      pages/UserCoupons/index.vue
  6. 15
      pages/UserOrderPage/index.vue

3
pages/ChatDetail/index.vue
Unescape View File

@ -25,7 +25,7 @@
</view>
</view>
</view>
</scroll-view>
<view class="detail-input-group-container">
<view class="detail-input-group row">
@ -43,7 +43,6 @@
</MzButton>
</view>
</view>
</scroll-view>
</view>
</view>

9
pages/Index/components/OrderPage/index.vue
Unescape View File

@ -45,10 +45,15 @@
<view class="order-card-container-background-main row">
<view class="order-card-col row" :style="{backgroundImage:'url('+staticImage.orderCardBackground+')'}">
<view class="order-card-left">
<image class="img" :src="petImage" mode="aspectFill" />
<image class="img" :src="item.pet_avatar" mode="aspectFill" />
</view>
<view class="order-card-right">
<view class="order-card-title">{{item.addr}}</view>
<view class="order-card-title">
<!-- {{item.addr}}-->
<u-text :text="item.addr"
color="#131313" size="32"
custom-style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;"></u-text>
</view>
<view class="order-card-tag-container row">
<view class="order-card-tag" v-for="(server, i) in item.services" wx:key="i">{{ server }}</view>
</view>

428
pages/OrderDetail/components/index.scss
Unescape View File

@ -0,0 +1,428 @@
.app-wallpaper{
position: relative;
background:{
size: 100% 100%;
repeat: no-repeat;
};
.order-capsule-container{
position: sticky;
box-sizing: border-box;
width:100%;
padding:10rpx;
border:2rpx solid #262626;
border-radius: 45rpx;
box-shadow: 1rpx 4rpx 12rpx 0rpx rgba(90,104,103,0.24);
background-color: #F8FAFA;
.order-capsule{
box-sizing: border-box;
padding:20rpx;
text-align: center;
font: {
size:30rpx;
weight:500;
}
line-height:30rpx;
border:2rpx solid rgba(0,0,0,0);
&.active{
background:{
color:#4DC3B8;
}
color:#FFFFFF;
border:2rpx solid #262626;
border-radius:35rpx;
}
}
}
.order-screen-container{
.order-screen{
padding:40rpx 0 20rpx 0;
padding-right: 66rpx;
font-size: 28rpx;
line-height: 53rpx;
color:#646464;
font-weight: 400;
&.active{
color:#000000;
font-size: 32rpx;
font-weight: 500;
.order-screen-active{
display:flex;
}
}
.order-screen-active{
display: none;
align-items: center;
justify-content: center;
.img{
width:37rpx;
}
}
}
.order-screen-time-container{
flex:1;
margin-left:auto;
justify-content: flex-end;
.order-screen{
// padding-right:0;
}
}
.order-screen-time-title{
color:#B5B5B5;
font-size:26rpx;
font-weight: 400;
line-height:53rpx;
padding-right: 16rpx;
}
.order-screen-time-buttton-container{
padding-right: 0;
}
.order-screen-time-buttton{
padding:8rpx 19rpx;
color:#4EC2B7;
font-size: 28rpx;
font-weight: 400;
background-color:#ffffff;
border:1px solid #4EC2B7;
border-radius: 10rpx;
line-height: 28rpx;
box-shadow: 0rpx 4rpx 5rpx 0rpx rgba(82,84,84,0.1), 2rpx -4rpx 0rpx 0rpx rgba(78,194,183,0.2);
}
}
.order-list-container{
width:100%;
max-height: 1000rpx;
height: 100%;
overflow: auto;
box-sizing: border-box;
.order-list-item{
position: relative;
.pet-gun{
background:{
size: 80% 100%;
repeat: no-repeat;
position: center center;
}
height:90rpx;
width:100%;
position: absolute;
top:-60rpx;
z-index: 1;
}
margin-bottom:30rpx;
width:100%;
box-sizing: border-box;
.order-card-container{
width:100%;
box-sizing: border-box;
padding:10rpx 10rpx;
position: relative;
box-sizing: border-box;
.order-card-container-background{
width:100%;
height:90%;
position: absolute;
left:0rpx;
z-index: -1;
bottom:0rpx;
border: 3rpx solid #262626;
box-shadow: 2rpx 6rpx 11rpx 0rpx rgba(159,167,185,0.3);
border-radius: 26rpx;
background: {
color:#EED9AD;
};
}
.order-card-container-background-main{
width:100%;
background:{
color:#FFFFFF;
}
border-radius: 26rpx;
border: 3rpx solid #262626;
padding:7rpx;
box-sizing:border-box;
.order-card-col{
width:100%;
box-sizing: border-box;
padding:20rpx;
background:{
size:100% 100%;
position: center center;
repeat:no-repeat;
}
}
}
.order-card-left{
align-items: center;
.left-background{
box-sizing: border-box;
width:135rpx;
height:135rpx;
border-radius: 50%;
align-items: center;
justify-content: center;
display: flex;
background:{
color:#EED9AD;
}
}
//height:auto;
margin-right: 25rpx;
.img{
width:110rpx;
height:110rpx;
border-radius: 50%;
}
}
.order-card-right{
border-radius: 30rpx;
align-items: center;
justify-content: center;
background:{
color:#FBF5E7;
}
text-align: center;
padding:30rpx;
padding-left:20rpx;
.order-card-title{
padding-top:5px;
font-size:32rpx;
font-weight: 500;
line-height: 30rpx;
color:#131313;
}
.order-card-tag-container{
padding-top:18rpx;
.order-card-tag{
padding:9rpx 20rpx;
background:{
color:#E9FBF7;
}
color:#4DC3B8;
font-size:26rpx;
font-weight:400;
line-height:1;
border-radius:6rpx;
&+.order-card-tag{
margin-left:9rpx;
}
}
}
.order-card-day{
}
.order-card-pay-time{
}
.order-card-day,.order-card-pay-time{
padding-top:20rpx;
font-size:28rpx;
font-weight:400;
line-height:30rpx;
color:#767676;
.card-label{
color:#1B1B1B;
}
}
}
.order-card-bottom{
padding-top:30rpx;
justify-content: center;
}
.card-button{
&:nth-child(1){
padding-right:23rpx;
}
&:nth-child(2){
padding-left:23rpx;
}
}
}
}
}
.pet-detail-bottom-container{
padding:15rpx;
.pet-detail-container{
.pet-detail-gun{
width:100%;
text-align: center;
.img{
height:90rpx;
}
position: absolute;
top:-70rpx;
left:0;
}
position: relative;
.pet-detail-content{
padding:50rpx 0;
border: 3rpx solid #262626;
background:{
color:#FFFFFF;
}
border-radius: 26rpx;
.content-item{
align-items: center;
padding:15rpx 30rpx;
.item-icon{
width:32rpx;
height:32rpx;
.img{
width:32rpx;
height:32rpx;
}
}
.item-title{
font-size: 30rpx;
font-weight: 500;
color: #111111;
margin-left:3rpx;
}
.item-content {
font-size: 30rpx;
font-weight: 400;
color: #4D4D4D;
margin-left:10rpx;
&.item-textarea{
width:100%;
padding:30rpx;
background:{
color:#F2F8F8;
}
margin-left:0;
margin-top:20rpx;
min-height:100rpx;
}
}
&.pet-detail-video-group{
.video-title{
.img{
height:35rpx;
}
}
.video-content{
padding:10rpx;
position: relative;
.video-content-container{
height:250rpx;
background-color:rgba(0,0,0,1);
border-radius: 16rpx;
position: relative;
z-index: 2;
.img{
height:250rpx;
}
}
.video-content-background{
width:100%;
height:75%;
position: absolute;
bottom:0;
left:0;
z-index: 1;
border:1rpx solid #000;
border-radius: 16rpx;
}
}
}
&.pet-detail-photo-group{
box-sizing: border-box;
.video-content{
box-sizing: border-box;
}
.video-title{
.img{
height:35rpx;
}
}
.photo-item{
box-sizing: border-box;
padding:10rpx;
.photo-item-container{
position: relative;
box-sizing: border-box;
.photo-content{
box-sizing: border-box;
position: relative;
border:1rpx solid #000;
border-radius: 20rpx;
z-index: 2;
}
.photo-background{
box-sizing: border-box;
position: absolute;
top:10rpx;
left:0;
z-index: 1;
width:100%;
height:100%;
border:1rpx solid #000;
border-radius: 20rpx;
}
}
.img{
width:100%;
}
}
}
}
}
.pet-detail-background{
position: absolute;
width:100%;
height:100%;
top:0;
left:0;
z-index: -1;
border-radius: 26rpx;
transform: rotateZ(1.5grad);
background:{
color:#4DC3B8;
}
}
}
}
}
.right-nav{
width:132rpx;
position: fixed;
right:-25rpx;
bottom:160rpx;
.right-nav-button{
height:127rpx;
background:{
size:100% 100%;
repeat:no-repeat;
}
}
}
.footer-menu{
padding:30rpx;
position: fixed;
bottom:0;
left:0;
width: 100%;
z-index: 9999;
background: #FFFFFF;
border: 2rpx solid #262626;
box-shadow: 0rpx -2rpx 20rpx 0rpx rgba(0,0,0,0.06);
border-radius: 26rpx 26rpx 0rpx 0rpx;
text-align: center;
.footer-button{
display: flex;
justify-content: center;
}
}

313
pages/OrderDetail/index.vue
Unescape View File

@ -0,0 +1,313 @@
<template>
<HeaderNav title="萌宠详情" :is-back="true"></HeaderNav>
<view class="app-wallpaper" :style="{
backgroundImage:'url('+staticImage.wallpaperBgImage+')'
}">
<view class="order-screen-container row">
<view class="order-list-container">
<view class="order-list-item">
<view v-show="false" class="pet-gun" :style="{
backgroundImage:'url('+staticImage.petGun+')'
}"></view>
<view class="order-card-container row">
<view class="order-card-container-background col-12"></view>
<view class="order-card-container-background-main row">
<view class="order-card-col row">
<view class="order-card-left">
<view class="left-background">
<image class="img" :src="pet.avatar" mode="aspectFill" />
</view>
</view>
<view class="order-card-right col row">
<view class="col">
<view class="name ">{{ pet.name }}</view>
<view class="old">{{ pet.age }}岁</view>
</view>
<view class="col">
<view class="type">{{ pet.type_name }}</view>
<view class="weight">{{ pet.weight }}kg</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="pet-detail-bottom-container">
<view class="pet-detail-container">
<view class="pet-detail-gun col">
<image class="img" mode="heightFix" :src="staticImage.petGun"/>
</view>
<view class="pet-detail-content">
<view class="content-item row">
<view class="item-icon">
<image class="img" mode="widthFix" :src="staticImage.petName"/>
</view>
<view class="item-title">
宝贝名字：
</view>
<view class="item-content">
{{ pet.name }}
</view>
</view>
<view class="content-item row">
<view class="item-icon">
<image class="img" mode="widthFix" :src="staticImage.petType"/>
</view>
<view class="item-title">
宝贝品种：
</view>
<view class="item-content">
{{ pet.type_name }}
</view>
</view>
<view class="content-item row">
<view class="item-icon">
<image class="img" mode="widthFix" :src="staticImage.petBirth"/>
</view>
<view class="item-title">
出生日期：
</view>
<view class="item-content">
{{ pet.birthday.substr(0, 10) }}
</view>
</view>
<view class="content-item row">
<view class="item-icon">
<image class="img" mode="widthFix" :src="staticImage.petSex"/>
</view>
<view class="item-title">
宝贝性别：
</view>
<view class="item-content">
<span v-if="pet.sex === 1">男</span>
<span v-if="pet.sex === 2">女</span>
<span v-else>保密</span>
</view>
</view>
<view class="content-item row">
<view class="item-icon">
<image class="img" mode="widthFix" :src="staticImage.petYm"/>
</view>
<view class="item-title">
最近疫苗时间：
</view>
<view class="item-content">
{{ pet.last_vaccine_time.substr(0, 10) }}
</view>
</view>
<view class="content-item row">
<view class="item-icon">
<image class="img" mode="widthFix" :src="staticImage.petQc"/>
</view>
<view class="item-title">
最近驱虫时间
</view>
<view class="item-content">
{{ pet.last_insect_repellent_time.substr(0, 10) }}
</view>
</view>
<view class="content-item row">
<view class="item-icon">
<image class="img" mode="widthFix" :src="staticImage.petHome"/>
</view>
<view class="item-title">
宝贝户口（犬证）：
</view>
<view class="item-content">
<span v-if="pet.is_home === 1">有</span>
<span v-else>无</span>
</view>
</view>
<view class="content-item row">
<view class="item-icon">
<image class="img" mode="widthFix" :src="staticImage.petBs"/>
</view>
<view class="item-title">
过往病史：
</view>
<view class="item-content item-textarea">
<span v-if="pet.remarks">{{ pet.remarks }}</span>
<span v-else>无</span>
</view>
</view>
<view class="content-item pet-detail-video-group">
<view class="video-title">
<image class="img" mode="heightFix" :src="staticImage.petVideoTitle"/>
</view>
<view class="video-content">
<view class="video-content-container">
<video class="img" mode="aspectFill" :src="pet.video"></video>
</view>
<view class="video-content-background"></view>
</view>
</view>
<view class="content-item pet-detail-photo-group" v-if="pet.images.length > 0">
<view class="video-title">
<image class="img" mode="heightFix" :src="staticImage.petPhotoTitle"/>
</view>
<view class="video-content row" >
<view class="photo-item col-4" v-for="(item, index) in pet.images" >
<view class="photo-item-container">
<view class="photo-content">
<image class="img" mode="widthFix" :src="item ? item : staticImage.wallpaperBgImage"/>
</view>
<view class="photo-background"></view>
</view>
</view>
</view>
</view>
</view>
<view class="pet-detail-background"></view>
</view>
</view>
</view>
<view class="footer-menu row">
<view class="footer-button col-6">
<MzButton
title="删除"
button-color="#ffffff"
font-color="##262626"
button-width="250rpx"
@click="delPet()"
>
</MzButton>
</view>
<view class="footer-button col-6">
<MzButton
title="修改"
button-color="#4DC3B8"
font-color="#FFFFFF"
button-width="250rpx"
@click="navTo('/pages/Pet/create?id='+id)"
>
</MzButton>
</view>
</view>
<!-- <RightNav></RightNav> -->
</template>
<script>
import {
imghost
} from '@/config/host.js'
import HeaderNav from '@/components/HeaderNav/Index.vue';
import FooterNav from '@/components/FooterNav/Index.vue';
import RightNav from '@/components/RightNav/Index.vue';
import MzButton from '@/components/MzButton/Index.vue';
import api from '@/utils/functions.js';
import {delPet, getDetail} from "@/api/pet";
import log from "@/utils/log";
import functions from "@/utils/functions.js";
export default {
components: {
HeaderNav,
FooterNav,
RightNav,
MzButton
},
data() {
return {
title: 'Hello',
loading: true,
staticImage: {
screenActiveImg: imghost + '/static/image/order-screen-active.png',
orderCardBackground: imghost + '/static/image/order-card-background.png',
wallpaperBgImage:imghost +'/static/image/background.png',
petGun:imghost +'/static/image/pet_gun.png',
petName:imghost +'/static/image/pet-detail-name.png',
petType:imghost +'/static/image/pet-detail-type.png',
petBirth:imghost +'/static/image/pet-detail-birthday.png',
petSex:imghost +'/static/image/pet-detail-sex.png',
petYm:imghost +'/static/image/pet-detail-ym.png',
petQc:imghost +'/static/image/pet-detail-qc.png',
petHome:imghost +'/static/image/pet-detail-home.png',
petBs:imghost +'/static/image/pet-detail-bs.png',
petVideoTitle:imghost +'/static/image/pet-detail-video-title.png',
petPhotoTitle:imghost +'/static/image/pet-detail-photo-title.png',
},
indexBanner: [{
image: imghost + '/static/image/banner.png',
url: '',
}],
user: {
avatar: imghost + '/static/image/banner.png',
nickname: '清晨的风',
coupons: 221,
id: 88685
},
isTop: false,
pagePadding: 100,
petImage: imghost + '/static/image/pet_avatar1.jpeg',
orderCardList:[
{
title:'成都市武侯区丰德国际4栋...',
tags:['刷毛','洗澡'],
do_time:'2023/05/03 15—17时',
create_time:'2023/03/03 15:23:22',
},
{
title:'成都市武侯区丰德国际4栋...',
tags:['刷毛','洗澡'],
do_time:'2023/05/03 15—17时',
create_time:'2023/03/03 15:23:22',
},
],
pet:{},
id:0,
}
},
onLoad(option) {
log(option);
this.id = option.id;
this.getDetail(option.id);
},
methods: {
delPet(){
functions.confirm("确认删除该宠物吗？").then(() => {
delPet(this.id).then((res) => {
functions.success('删除成功').then(() => uni.navigateBack())
})
})
},
navTo(url){
uni.navigateTo({
url:url
})
},
getDetail(id){
getDetail(id).then(data => {
this.pet = data.data;
log(data);
})
}
},
onPageScroll(res) {
if(res.scrollTop <= 20){
uni.$emit('isTop', true);
}else{
uni.$emit('isTop', false);
}
},
created() {
this.pagePadding = (api.navHeight().navPaddingTop +
api.navHeight().navHeight + (api.navHeight().headerPadding * 2))
}
}
</script>
<style lang="scss">
@import './components/index.scss';
</style>

2
pages/UserCoupons/index.vue
Unescape View File

@ -4,7 +4,7 @@
backgroundImage:'url('+staticImage.wallpaperBgImage+')'
}">
<view class="capsule-container row" v-if="type === 'lists'">
<view class="capsule-container row">
<view class="capsule col-6" :class="{active:item.value === couponType}" @click="couponTypeToggle(item)" v-for="item in types">
{{ item.title }}
</view>

15
pages/UserOrderPage/index.vue
Unescape View File

@ -50,10 +50,14 @@
<view class="order-card-container-background-main row">
<view class="order-card-col row" :style="{backgroundImage:'url('+staticImage.orderCardBackground+')'}">
<view class="order-card-left">
<image class="img" :src="petImage" mode="aspectFill" />
<image class="img" :src="item.pet_avatar" mode="aspectFill" />
</view>
<view class="order-card-right">
<view class="order-card-title">{{item.addr}}</view>
<view class="order-card-right" style="max-width: 65%;">
<view class="order-card-title" style="">
<u-text :text="item.addr"
color="#131313" size="32"
custom-style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;"></u-text>
</view>
<view class="order-card-tag-container row">
<view class="order-card-tag" v-for="(server, i) in item.services" wx:key="i">{{ server }}</view>
</view>
@ -62,6 +66,11 @@
<view class="order-card-pay-time"><text class="card-label">下单时间：</text>{{item.create_time}}
</view>
</view>
<!-- <view class="" style="padding:20rpx 0;">-->
<!-- <u-text :text="'订单编号: '+item.no"-->
<!-- color="#131313" size="28"-->
<!-- custom-style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;"></u-text>-->
<!-- </view>-->
<view class="order-card-bottom col-12 row">
<view class="card-button" @click="navTo(`/pages/ChatDetail/index?id=${item.id}`)">
<MzButton

Write Preview
Loading…
Cancel
Save