root
/
school_uni
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

样式

master
tianyi 3 weeks ago
parent
5841fac3da
commit
7b0eb8ac3d
1 changed files with 132 additions and 132 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. 264
      package1/buyFood/buyFood.vue

264
package1/buyFood/buyFood.vue
View File

@ -8,14 +8,14 @@
</view>
</view>
</view>
<view style="position: absolute;top: 100px;width: 100%;">
<view style="position: absolute;top: 200rpx;width: 100%;">
<view class="tab1" v-if="isPaotui">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/6b3a4d4c61ee42feb29e69d6fcfd2c1e.png" alt=""
style="position: absolute;" />
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/1cbed0734a154a70b75cb84a811bd0b7.png" alt="" />
<view style="width: 100%;height: 80px;position: absolute;top:0;left: 0;display: flex;">
<view style="width: 50%;height: 80px;"></view>
<view style="width: 50%;height: 80px;" @tap="isPaotui=!isPaotui"></view>
<view style="width: 100%;height: 160rpx;position: absolute;top:0;left: 0;display: flex;">
<view style="width: 50%;height: 160rpx;"></view>
<view style="width: 50%;height: 160rpx;" @tap="isPaotui=!isPaotui"></view>
</view>
</view>
<view class="tab1" v-else>
@ -23,9 +23,9 @@
style="position: absolute;" />
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/82627e6cedcf409a932d6afaafa19a4b.png" alt=""
style="position: absolute;" />
<view style="width: 100%;height: 80px;position: absolute;top:0;left: 0;display: flex;">
<view style="width: 50%;height: 80px;" @tap="isPaotui=!isPaotui"></view>
<view style="width: 50%;height: 80px;"></view>
<view style="width: 100%;height: 160rpx;position: absolute;top:0;left: 0;display: flex;">
<view style="width: 50%;height: 160rpx;" @tap="isPaotui=!isPaotui"></view>
<view style="width: 50%;height: 160rpx;"></view>
</view>
</view>
</view>
@ -51,32 +51,32 @@
{{formData.address.receiverName || ''}}
</view>
<view @tap.stop="openAddressBook"
style="color: #0b9b73; font-size: 13px; font-weight: normal; margin-left: 10px; display: flex; align-items: center;">
style="color: #0b9b73; font-size: 26rpx; font-weight: normal; margin-left: 20rpx; display: flex; align-items: center;">
更换地址 <uni-icons type="right" size="13" color="#0b9b73"></uni-icons>
</view>
</view>
</view>
<view class="time-box" v-if="isPaotui">
<view class="time1" @tap="checkTime(true)"
:style="{'background':formData.isImmediately?'linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1))':'#eee'}">
:style="{'background':formData.isImmediately?'linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1))':'#f5f5f5'}">
<view style="font-weight: 700;">
立即送出
</view>
<view style="font-size: 10px;color: #777;">
<view style="font-size: 20rpx;color: #777;">
预计{{immediateTimeStr}}送达
</view>
</view>
<view class="time1" @tap="checkTime(false)"
:style="{'background':formData.isImmediately==false?'linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1))':'#eee'}">
:style="{'background':formData.isImmediately==false?'linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1))':'#f5f5f5'}">
<view style="font-weight: 700;">
预约配送
</view>
<view class="">
<view style="font-size: 10px;color: #777;"
<view style="font-size: 20rpx;color: #777;"
v-if="formData.isImmediately!=true&&formData.deliveryTime!=''">
{{formData.deliveryTime}}
</view>
<view v-else style="font-size: 10px;color: #777;">
<view v-else style="font-size: 20rpx;color: #777;">
选择时间 >
</view>
</view>
@ -84,17 +84,17 @@
</view>
<view v-if="isPaotui" style='background: #fff;border-bottom: 1px solid #eee;'>
<view
style="height: 45px;line-height: 20px;padding: 0 20px;font-size: 14px;font-weight: 700;padding-top: 10px;">
style="height: 90rpx;line-height: 40rpx;padding: 0 40rpx;font-size: 28rpx;font-weight: 700;padding-top: 20rpx;">
<view class="">
配送员
</view>
<view style="font-size: 12px;color: #777;">
<view style="font-size: 24rpx;color: #777;">
指定配送员后，如遇到配送员拒绝接单，该订单进入抢单大厅
</view>
</view>
<view style="padding: 20px;">
<view style="padding: 40rpx;">
<view
style="display: flex;font-size: 14px;font-weight: bold;line-height: 25px;margin-bottom: 15px;align-items: center;">
style="display: flex;font-size: 28rpx;font-weight: bold;line-height: 50rpx;margin-bottom: 30rpx;align-items: center;">
<view style="width:50%;display: flex;align-items: center;">
<view class="radio-check" v-if="selected === 'buzhiding'">
<uni-icons type="checkmarkempty" size="12"></uni-icons>
@ -104,13 +104,13 @@
</view>
<view style="width: 50%;display: flex;justify-content: flex-end;align-items: center;"
v-if="selected === 'buzhiding'">
<text style="color: #777; font-weight: normal; margin-right: 5px; font-size: 12px;">佣金 ￥</text>
<text style="color: #777; font-weight: normal; margin-right: 10rpx; font-size: 24rpx;">佣金 ￥</text>
<input type="digit" v-model="customCommission"
style="width: 70px; border-bottom: 1px solid #ccc; text-align: center; font-size: 14px; font-weight: normal; height: 25px; min-height: 25px;"
style="width: 140rpx; border-bottom: 1px solid #ccc; text-align: center; font-size: 28rpx; font-weight: normal; height: 50rpx; min-height: 50rpx;"
placeholder="金额" />
</view>
</view>
<view class="" style="display: flex;font-size: 14px;font-weight: bold;line-height: 25px;">
<view class="" style="display: flex;font-size: 28rpx;font-weight: bold;line-height: 50rpx;">
<view style="width:50%;display: flex;">
<view class="radio-check" v-if="selected === 'zhiding'">
<uni-icons type="checkmarkempty" size="12"></uni-icons>
@ -126,12 +126,12 @@
</view>
</view>
<view class="box1">
<view style="width: 100%;line-height: 35px;font-size: 14px;font-weight: 700;">
<view style="width: 100%;line-height: 70rpx;font-size: 28rpx;font-weight: 700;">
{{shopItem.shopName || '未知道商家'}}
</view>
<block v-if="!isGroupBuy">
<view style="display: flex;padding: 10px;background: #eee;border-radius: 10px; margin-bottom:10px;"
<view style="display: flex;padding: 20rpx;background: #f5f5f5;border-radius: 20rpx; margin-bottom:20rpx;"
v-for="(cartItem, index) in cartItems" :key="index">
<view class="goods-img">
<img :src="cartItem.item.productPicture" alt="">
@ -157,7 +157,7 @@
</view>
</block>
<block v-else>
<view style="display: flex;padding: 10px;background: #eee;border-radius: 10px; margin-bottom:10px;"
<view style="display: flex;padding: 20rpx;background: #f5f5f5;border-radius: 20rpx; margin-bottom:20rpx;"
v-if="groupItem">
<view class="goods-img">
<img :src="groupItem.item.productPicture" alt="">
@ -177,7 +177,7 @@
</view>
<view class="pintuan-left-price" style="flex:1;">
<view
style="background: rgba(255, 57, 57, 0.2);padding: 0px 6px;border-radius: 10px;margin-left: 10px;">
style="background: rgba(255, 57, 57, 0.2);padding: 0px 12rpx;border-radius: 20rpx;margin-left: 20rpx;">
<text>拼团</text>
<text style="color: red;">￥{{groupItem.groupRule.groupPrice}}</text>
</view>
@ -188,7 +188,7 @@
</block>
<view>
<view style="height: 40px;line-height: 40px;display: flex;">
<view style="height: 80rpx;line-height: 80rpx;display: flex;">
<view style="flex: 1;color: #777;font-weight: 700;">
打包费
</view>
@ -196,9 +196,9 @@
￥{{packageFee.toFixed(2)}}
</view>
</view>
<view style="height: 40px;line-height: 40px;display: flex;" v-if="isPaotui">
<view style="height: 80rpx;line-height: 80rpx;display: flex;" v-if="isPaotui">
<view style="flex: 1;color: #777;font-weight: 700;">
配送费 <text v-if="isGroupBuy" style="font-size: 10px;color: #999;">(均摊)</text>
配送费 <text v-if="isGroupBuy" style="font-size: 20rpx;color: #999;">(均摊)</text>
</view>
<view style="color: #000;font-weight:700;">
￥{{deliveryFeeCalc.toFixed(2)}}
@ -206,15 +206,15 @@
</view>
</view>
<view
style="display: flex;height: 40px;line-height: 50px;border-top: 1px solid #eee;font-size: 16px;font-weight: 700;">
<view style="flex: 1;" @tap="$refs.pintuanPopup.open()">
style="display: flex;height: 80rpx;line-height: 100rpx;border-top: 1px solid #eee;font-size: 32rpx;font-weight: 700;">
<view style="flex: 1;">
合计
</view>
<view class="">
￥{{totalAmountCalc.toFixed(2)}}
</view>
</view>
<view style="height:80px;"></view>
<view style="height:160rpx;"></view>
<view class="buy-bottom">
<view class="bottom-btn" @tap="submitPay">
立即支付
@ -233,13 +233,13 @@
<view class="warnImg">
<img v-if="warnPopup == 'shdz'" @tap="$refs.warnPopup.close()"
src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/4996043b3987401794b974d359429b8e.png"
alt="填写收货地址" style="width:300px;height:370px;" />
alt="填写收货地址" style="width:600rpx;height:740rpx;" />
<img v-if="warnPopup == 'psyj'" @tap="$refs.warnPopup.close()"
src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/001cf760048b4718bdccd55085bef601.png"
alt="填写配送佣金" style="width:300px;height:370px;" />
alt="填写配送佣金" style="width:600rpx;height:740rpx;" />
<img v-if="warnPopup == 'psy'" @tap="$refs.warnPopup.close()"
src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/e10ad77ca478413a9c53918750ecb932.png"
alt="指定配送员" style="width:300px;height:370px;" />
alt="指定配送员" style="width:600rpx;height:740rpx;" />
</view>
</uni-popup>
<!-- 支付弹出层 -->
@ -247,32 +247,32 @@
<view class="pay-popup">
<view class="content">
<view class="box1">
<view style="height: 35px;line-height: 35px;text-align: center;">
<view style="height: 70rpx;line-height: 70rpx;text-align: center;">
支付剩余时间 59:09
</view>
<view
style="height: 45px;line-height: 45px;text-align: center;font-weight: 700;font-size: 15px;">
style="height: 90rpx;line-height: 90rpx;text-align: center;font-weight: 700;font-size: 30rpx;">
￥<text
style="font-size: 30px;">{{backendTotalAmount ? backendTotalAmount.toFixed(2) : totalAmountCalc.toFixed(2)}}</text>
style="font-size: 60rpx;">{{backendTotalAmount ? backendTotalAmount.toFixed(2) : totalAmountCalc.toFixed(2)}}</text>
</view>
<view style="height: 20px;text-align: center;color: red;">
<view style="height: 40rpx;text-align: center;color: red;">
若拼团失败，将会为您自动退款
</view>
</view>
<view class="box1" style="display: flex;padding: 20px;">
<view class="box1" style="display: flex;padding: 40rpx;">
<view style="flex: 1;">
<view style="height: 21px;line-height: 21px;display: flex;">
<view style="height: 42rpx;line-height: 42rpx;display: flex;">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/4c8e0cc311db4d38ab43e019673c4b8c.png"
alt="" style="width: 21px;height: 21px;margin-right: 10px;" />
<text style="font-size: 15px;font-weight: 700;">微信支付</text>
alt="" style="width: 42rpx;height: 42rpx;margin-right: 20rpx;" />
<text style="font-size: 30rpx;font-weight: 700;">微信支付</text>
</view>
<view style="text-align: right;margin-left: 30px;color: #777;width: 73px;">
<view style="text-align: right;margin-left: 60rpx;color: #777;width: 146rpx;">
使用微信支付
</view>
</view>
<view style="width: 18px;padding-top: 10px;">
<view style="width: 36rpx;padding-top: 20rpx;">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/02bff7edc4e04caaa1868955ff684f1f.png"
alt="" style="width: 18px;height: 18px;" />
alt="" style="width: 36rpx;height: 36rpx;" />
</view>
</view>
<view class="btn" @tap="wxPayment">
@ -285,13 +285,13 @@
<uni-popup ref="pintuanPopup" background-color="#fff">
<view class="pintuan-popup">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/ecd00dab1c9c44198d765bc08bc1bd71.png" alt=""
style="position: absolute;top: 0;right: 0;width: 120px;height: 90px;">
<view style="position: absolute;bottom: 0;width: 100%;height: 380px;">
style="position: absolute;top: 0;right: 0;width: 240rpx;height: 180rpx;">
<view style="position: absolute;bottom: 0;width: 100%;height: 760rpx;">
<view class="kaituan1">
<view class="kaituan1-title">
差1人即可成团
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/21b403bd13414ce79ad73cf1c8e3de98.png"
alt="" style="width: 60px;height: 11px;position: absolute;bottom: 0;right: 15px;" />
alt="" style="width: 120rpx;height: 22rpx;position: absolute;bottom: 0;right: 30rpx;" />
</view>
<view class="kaituan1-title1">
快呼唤小伙伴参加吧！
@ -301,7 +301,7 @@
<view class="kaituan22">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png"
alt=""
style="width: 45px;height: 45px;border-radius: 45px;margin: 0 auto;display: block;" />
style="width: 90rpx;height: 90rpx;border-radius: 90rpx;margin: 0 auto;display: block;" />
</view>
<view class="kaituan22">
<view class="weipincheng">
@ -315,14 +315,14 @@
</view>
</view>
<view class="kaituan3">
剩余<text style="font-size: 16px;font-weight: 700;padding: 0 10px;color: red;">23:59:23</text>结束
剩余<text style="font-size: 32rpx;font-weight: 700;padding: 0 20rpx;color: red;">23:59:23</text>结束
</view>
<view class="kaituan4">
分享至微信 <uni-icons type="weixin" size="15"></uni-icons>
</view>
<view class="kaituan5">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/c1f1b45c98fa4db1a1e5f98b3a0573c2.png"
alt="" style="width: 260px;height: 75px;margin: 0 auto;display: block;" />
alt="" style="width: 520rpx;height: 150rpx;margin: 0 auto;display: block;" />
</view>
</view>
</view>
@ -851,7 +851,7 @@
}
.title-name {
padding-top: 55px;
padding-top: 110rpx;
font-size: 36rpx;
font-weight: 700;
flex: 1;
@ -860,7 +860,7 @@
.tab1 {
width: 100%;
height: 80px;
height: 160rpx;
position: relative;
img {
@ -872,10 +872,10 @@
.box1 {
width: 95%;
margin: 0 auto 10px;
margin: 0 auto 20rpx;
background: #fff;
border-radius: 10px;
padding: 10px;
border-radius: 20rpx;
padding: 20rpx;
}
.goods-img {
@ -916,52 +916,52 @@
.goods-content-bottom {
display: flex;
line-height: 28px;
line-height: 56rpx;
color: #777;
}
.address-box {
background: #fff;
height: 40px;
line-height: 40px;
font-size: 16px;
height: 80rpx;
line-height: 80rpx;
font-size: 32rpx;
font-weight: 700;
padding: 0 20px;
padding: 0 40rpx;
}
.time-box {
background: #fff;
display: flex;
height: 70px;
padding: 10px;
height: 140rpx;
padding: 20rpx;
}
.time1 {
height: 50px;
height: 100rpx;
flex: 1;
border-radius: 10px;
border-radius: 20rpx;
text-align: center;
margin: 0 5px 0 10px;
line-height: 20px;
padding-top: 5px;
margin: 0 10rpx 0 20rpx;
line-height: 40rpx;
padding-top: 10rpx;
}
.radio-check {
background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
width: 24px;
height: 24px;
border-radius: 24px;
width: 48rpx;
height: 48rpx;
border-radius: 48rpx;
text-align: center;
line-height: 24px;
margin: 0 10px 0 0;
line-height: 48rpx;
margin: 0 20rpx 0 0;
}
.radio-no-check {
width: 24px;
height: 24px;
border-radius: 24px;
width: 48rpx;
height: 48rpx;
border-radius: 48rpx;
border: 1px solid #eee;
margin: 0 10px 0 0;
margin: 0 20rpx 0 0;
}
.buy-bottom {
@ -973,38 +973,38 @@
display: flex;
background: #fff;
z-index: 99;
box-shadow: 0 -10px 15px rgba(0, 0, 0, 0.3);
box-shadow: 0 -20rpx 30rpx rgba(0, 0, 0, 0.3);
}
.bottom-btn {
width: 90%;
height: 50px;
height: 100rpx;
background: linear-gradient(90deg, #e3ff96, #a6ffea);
font-size: 13px;
font-size: 26rpx;
font-weight: 700;
line-height: 50px;
line-height: 100rpx;
text-align: center;
border-radius: 50px;
margin: 10px auto;
border-radius: 100rpx;
margin: 20rpx auto;
}
.btn {
width: 95%;
height: 50px;
font-size: 16px;
height: 100rpx;
font-size: 32rpx;
font-weight: 700;
background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
border-radius: 50px;
line-height: 50px;
border-radius: 100rpx;
line-height: 100rpx;
text-align: center;
margin: 20px auto 0;
margin: 40rpx auto 0;
}
.ziqu-box {
background: #eee;
background: #f5f5f5;
width: 90%;
margin: 0 auto;
border-radius: 10px;
border-radius: 20rpx;
position: relative;
overflow: hidden;
}
@ -1013,35 +1013,35 @@
position: absolute;
top: 0;
right: 0;
padding: 5px 10px;
padding: 10rpx 20rpx;
background: rgba(166, 255, 234, 1);
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 20rpx;
border-bottom-left-radius: 20rpx;
font-weight: 700;
font-size: 10px;
font-size: 20rpx;
}
.ziqu-address {
display: flex;
height: 50px;
height: 100rpx;
background: #fff;
width: 90%;
border-radius: 10px;
font-size: 13px;
margin: 30px auto 0;
border-radius: 20rpx;
font-size: 26rpx;
margin: 60rpx auto 0;
font-weight: bold;
line-height: 50px;
line-height: 100rpx;
img {
width: 20px;
height: 20px;
margin: 15px 10px 0 15px;
width: 40rpx;
height: 40rpx;
margin: 30rpx 20rpx 0 30rpx;
}
}
.ziqu-time-box {
width: 90%;
margin: 10px auto;
margin: 20rpx auto;
display: flex;
font-weight: 700;
}
@ -1049,9 +1049,9 @@
.ziqu-call-box {
width: 90%;
display: flex;
height: 35px;
line-height: 35px;
margin: 0 auto 10px;
height: 70rpx;
line-height: 70rpx;
margin: 0 auto 20rpx;
}
.ziqu-call {
@ -1060,29 +1060,29 @@
.book-popup-content {
position: relative;
height: 600px;
height: 1200rpx;
width: 100%;
padding: 10px;
padding: 20rpx;
overflow: scroll;
}
.vue-ref {
border-radius: 10px !important;
border-radius: 20rpx !important;
}
.pintuan-popup {
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/780a024aefb7431ba21cf16efc8a482e.png') no-repeat;
background-size: 100%;
width: 300px;
height: 480px;
width: 600rpx;
height: 960rpx;
position: relative;
}
.kaituan1 {
height: 60px;
font-size: 22px;
height: 120rpx;
font-size: 44rpx;
font-weight: 700;
margin-top: 10px;
margin-top: 20rpx;
}
.kaituan1-title {
@ -1090,25 +1090,25 @@
text-align: center;
img {
width: 60px;
height: 11px;
width: 120rpx;
height: 22rpx;
position: absolute;
bottom: 0;
right: 125px;
right: 250rpx;
}
}
.kaituan1-title1 {
font-size: 15px;
height: 30px;
line-height: 30px;
font-size: 30rpx;
height: 60rpx;
line-height: 60rpx;
text-align: center;
}
.kaituan2 {
display: flex;
width: 90%;
margin: 20px auto;
margin: 40rpx auto;
}
.kaituan22 {
@ -1116,33 +1116,33 @@
}
.kaituan3 {
height: 40px;
line-height: 40px;
height: 80rpx;
line-height: 80rpx;
text-align: center;
color: #777;
}
.kaituan4 {
width: 85%;
height: 50px;
height: 100rpx;
background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
border-radius: 50px;
border-radius: 100rpx;
text-align: center;
line-height: 50px;
font-size: 15px;
line-height: 100rpx;
font-size: 30rpx;
font-weight: 700;
margin: 10px auto;
margin: 20rpx auto;
}
.kaituan5 {
margin: 20px 0 20px;
margin: 40rpx 0 40rpx;
}
.weipincheng {
width: 45px;
height: 45px;
width: 90rpx;
height: 90rpx;
background: rgba(166, 255, 234, 0.24);
border-radius: 45px;
border-radius: 90rpx;
text-align: center;
font-size: 60rpx;
font-weight: 700;
@ -1150,7 +1150,7 @@
z-index: 97;
color: #02fbdd;
border: 1px solid #a6ffea;
line-height: 40px;
line-height: 80rpx;
margin: 0 auto;
}
</style>
Write Preview
Loading…
Cancel
Save