Commit 778a9a79 by songbingqi

修改页面样式效果

parent a8f2f486
<template>
<view class="page-body">
<scroll-view class="nav-left" :style="[heightStyle]" :class="[shopCarFlag?'shopCarcss':'' ]" scroll-y :scroll-top="scrollLeftTop" scroll-with-animation>
<view class="nav-left-item" v-for="item in classifyData" @click="categoryClickMain(item.id)" :key="item.id"
<view class="nav-left-item" v-for="item in classifyData" @click="categoryClickMain(item.id)" :key="item.id"
:class="item.id == categoryId ? 'active' : ''">
<span>{{ item.name }}</span>
<view :class="item.id == categoryId ? 'active-line' : ''"></view>
<!-- <view :class="item.id == categoryId ? 'active-line' : ''"></view> -->
</view>
</scroll-view>
<scroll-view class="nav-right" :style="[heightStyle]" :class="[shopCarFlag?'shopCarcss':'' ]" scroll-y :scroll-top="scrollTop" @scroll="scroll" @touchstart="openScroll"
......@@ -390,7 +390,7 @@ export default {
.nav-left {
box-sizing: border-box;
width: 160rpx;
width: 164rpx;
background: #fff;
border-right: 2rpx solid #F0F0F0;
height: calc(100vh - var(--scroll-height));
......@@ -400,7 +400,7 @@ export default {
.nav-left-item {
position: relative;
height: 143rpx;
height: 145rpx;
font-size: 24rpx;
font-weight: 400;
color: #666666;
......@@ -447,7 +447,7 @@ export default {
padding-left: 31rpx;
margin-bottom: 30rpx;
height: 40rpx;
font-size: 28rpx;
font-size: 32rpx;
font-weight: 600;
color: #333333;
line-height: 40rpx;
......@@ -456,7 +456,7 @@ export default {
.nav-right-item {
display: flex;
align-items: center;
padding: 0rpx 32rpx 0rpx 32rpx;
padding: 0rpx 32rpx 0rpx 31.37rpx;
margin-bottom: 70rpx;
background: #fff;
position: relative;
......@@ -488,21 +488,21 @@ export default {
font-family: PingFangSC-Medium, PingFang SC;
font-size: 28rpx;
height: 40rpx;
line-height: 40rpx;
font-weight: 500;
color: #333333;
}
.tags {
height: 28rpx;
margin-top: 7.91rpx;
.tag-item {
margin-top: 8.9rpx;
font-family: PingFangSC-Regular, PingFang SC;
height: 28rpx;
background-color: #F0F0F0;
margin-right: 16rpx;
padding: 0rpx 8rpx;
font-size: 20rpx;
color: #999999;
line-height: 28rpx;
vertical-align: top;
display: inline-block;
}
}
......@@ -512,29 +512,29 @@ export default {
font-size: 20rpx;
font-weight: 400;
color: #666666;
line-height: 40rpx;
margin-top: 13rpx;
margin-top: 13.46rpx;
height: 22rpx;
font-family: PingFangSC-Regular, PingFang SC;
.desc {
flex: 1;
height: 22rpx;
vertical-align: top;
line-height: 26rpx;
}
}
.mon {
height: 40rpx;
height: 38rpx;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 22rpx;
margin-top: 22.64rpx;
.discount {
font-family: Futura-Medium, Futura;
height: 40rpx;
height: 38rpx;
font-size: 28rpx;
color: #333333;
line-height: 40rpx;
line-height: 54rpx;
margin-right: 4.2rpx;
font-weight:500;
......@@ -545,11 +545,11 @@ export default {
.price {
flex: 1;
height: 40rpx;
height: 38rpx;
font-size: 20rpx;
color: #999999;
font-family: Futura-Medium, Futura;
line-height: 48rpx;
line-height: 60rpx;
.num {
text-decoration: line-through;
......@@ -563,7 +563,7 @@ export default {
}
.addbox{
line-height: 26rpx;
margin-top: 20rpx ;
.add{
width: 40rpx;
height: 40rpx;
......@@ -595,10 +595,10 @@ export default {
box-shadow: 0px 4px 8px 0px rgba(102, 102, 102, 0.1);
font-weight: 500;
color: #333333;
width: 164rpx;
background: #FFFFFF;
font-size: 24rpx;
background: #fff;
border-right: 4rpx solid #0050F6;
}
.active-line {
......
......@@ -96,7 +96,7 @@
}
.item-text {
margin-top: 12rpx;
margin-top: 14rpx;
color: #999999;
font-size: 20rpx;
}
......
......@@ -12,7 +12,7 @@
</view>
<div v-for="item in list" :key="item.id" @click="selectedShop(item)" class="shop_item">
<div class="header">
<h3>{{ item.name }}</h3>
<view class="name">{{ item.name }}</view>
<view class="adressBox">
<view>
<u-icon class="map" name="map" color="#999999" size="14"></u-icon>
......@@ -30,7 +30,7 @@
<div class="dec">
<view :style="{'height':'34rpx'}" v-show="item.distance && item.distance!=-1"></view>
<view class="goshop">去品尝</view>
<view :style="{'height':'34rpx'}" class="distance" v-show="item.distance && item.distance!=-1">距离 {{ item.distance }}</view>
<view :style="{'height':'30rpx'}" class="distance" v-show="item.distance && item.distance!=-1">距离 {{ item.distance }}</view>
</div>
</div>
</view>
......@@ -84,7 +84,7 @@ export default {
line-height: 36rpx;
}
.icon {
width: 22rpx;
width: 16rpx;
margin-left: 16rpx;
height: 24rpx;
display: flex;
......@@ -95,7 +95,7 @@ export default {
width: 90%;
background: #FFFFFF;
border: 1px solid #003AE9;
padding: 40rpx 30rpx 40rpx 32rpx;
padding: 44rpx 30rpx 44rpx 32rpx;
box-sizing: border-box;
margin: 30rpx auto;
display: flex;
......@@ -104,15 +104,20 @@ export default {
.header {
margin-right: 30rpx;
h3 {
font-size: 28rpx;
// border-right: 2rpx solid red;
.name {
font-size: 28rpx;
height: 42rpx;
line-height: 40rpx;
width: 348rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
font-family: PingFangSC-Medium, PingFang SC;
color: #333333;
}
.adressBox{
width: 348rpx;
margin-top: 14rpx;
margin-top: 16rpx;
display: flex;
justify-content: flex-start;
.address{
......@@ -121,10 +126,11 @@ export default {
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
margin-top: -5rpx;
}
}
.timeBox{
margin-top: 11rpx;
margin-top: 16rpx;
display: flex;
align-items: center;
justify-content: flex-start;
......@@ -133,12 +139,14 @@ export default {
font-size: 24rpx;
font-family: ArialMT;
color: #999999;
margin-top: -2rpx;
}
}
}
.line {
height: 146rpx;
border: 1rpx solid #979797;
width: 2rpx;
border: 1rpx solid #ECECEC;
}
.dec {
margin-left: 43rpx;
......@@ -146,6 +154,7 @@ export default {
flex-direction: column;
height: 146rpx;
justify-content: space-around;
border-radius: 2px;
view{
vertical-align: baseline;
}
......@@ -168,7 +177,7 @@ export default {
font-weight: 400;
color: #999999;
text-align: center;
line-height: 50rpx;
line-height: 40rpx;
}
}
......
......@@ -28,7 +28,7 @@
<button class="good-spec-rule-item" :disabled="UseIt(specItemRule.ruleId)"
@click="selectRoles(specItemRule, specItem)"
:class="{ active: isActvie(specItemRule) }">
<view>{{ specItemRule.ruleName }}</view>
{{ specItemRule.ruleName }}
</button>
</div>
</view>
......@@ -52,7 +52,7 @@
<view class="good-select good-select-height" :style="{'padding-bottom':BottomSafeHeight+'px'}">
<view class="good-select-price">
<div class="price">
<view class="good-select-price-normal">{{ Utils.isInteger(priceTotal.discount) }}</view>
<view class="good-select-price-normal"><text class="moneyLog"></text>{{ Utils.isInteger(priceTotal.discount) }}</view>
<view class="good-select-price-small" v-show="priceTotal.price!=priceTotal.discount">{{ Utils.isInteger(priceTotal.price) }}</view>
</div>
<div v-if="!size > 0" style="color: orangered">已售罄</div>
......@@ -414,12 +414,12 @@ export default {
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 44rpx;
line-height: 40rpx;
margin-top: 24rpx;
}
.good-spec-name {
margin-top: 28.98rpx;
margin-top: 51rpx;
font-family: PingFangSC-Regular, PingFang SC;
color: #999999;
font-weight: 400;
......@@ -432,7 +432,7 @@ export default {
display: flex;
flex-direction: row;
justify-content: flex-start;
margin-top: 26rpx;
margin-top: 26.02rpx;
flex-wrap: wrap;
border-radius: 0rpx;
......@@ -446,7 +446,7 @@ export default {
.default {
width: 45rpx;
height: 38rpx;
height: 48rpx;
background: url('@/static/imgs/tuijian.png') center center no-repeat;
background-size: 100%;
position: absolute;
......@@ -461,7 +461,7 @@ export default {
}
.good-spec-rule-item {
padding: 0rpx 20rpx;
padding: 7rpx 48rpx;
width: 100%;
height: 100%;
font-size: 24rpx;
......@@ -471,17 +471,16 @@ export default {
display: inline-block;
margin: 0;
margin: 0;
line-height: 50rpx;
line-height: 40rpx;
border-radius: 0rpx;
border: none;
font-family: PingFangSC-Regular, PingFang SC;
background: #EAEAEA;
&.active {
font-weight: 400;
padding: 0rpx 20rpx;
padding: 7rpx 48rpx 6rpx 48rpx;
background: #0050F6;
color: #fff;
color: #FFFFFF;
border-radius: 0rpx;
border: 0rpx;
font-family: PingFangSC-Regular, PingFang SC;
......@@ -509,7 +508,7 @@ button[disabled]:not([type]) {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
color: #333333;
padding-top:42rpx !important;
padding-top: 32rpx !important;
padding-bottom:22rpx !important
}
......@@ -563,12 +562,16 @@ button[disabled]:not([type]) {
margin-right: 12rpx;
font-weight: 500;
line-height: 38rpx;
.moneyLog {
font-size: 28rpx;
}
}
.good-select-price-small {
font-size: 20rpx;
text-decoration: line-through;
font-family: ArialMT;
line-height: 32rpx;
color: #999999;
}
}
......@@ -630,7 +633,7 @@ button[disabled]:not([type]) {
background-size:100% 100%;
}
span {
margin: 0 26rpx;
margin: 0 22rpx 0 26rpx;
font-size: 32rpx;
font-family: ArialMT;
color: #000000;
......
......@@ -101,10 +101,10 @@ export default {
.msg_item {
width: 100%;
height: 116rpx;
background: #FFFFFF;
padding: 24rpx 62rpx;
padding: 24rpx 32rpx;
box-sizing: border-box;
margin-left: 30rpx;
.msg_item_title_time {
display: flex;
......@@ -115,7 +115,7 @@ export default {
.sign {
width: 16rpx;
height: 16rpx;
background: #006ECF;
background: #0050F6;
border-radius: 50%;
position: absolute;
left: -30rpx;
......@@ -127,25 +127,26 @@ export default {
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
line-height: 34rpx
line-height: 34rpx;
}
.time {
font-size: 20rpx;
font-family: PingFangSC-Regular,
PingFang SC;
font-weight: 400;
color: #333333;
line-height: 28rpx;
font-family: ArialMT;
color: #999999;
line-height: 22rpx;
margin-right: 32rpx;
}
}
.msg_content {
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 28rpx;
width: 438rpx;
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
margin-top: 8rpx;
line-height: 28rpx;
}
......
......@@ -751,7 +751,7 @@ export default {
align-items: center;
}
.icno-arrow{
width: 9.27rpx;
width: 15.27rpx;
height: 21.68rpx;
}
}
......
......@@ -68,7 +68,7 @@
<div class="footer" :style="{'padding-bottom':BottomSafeHeight+'px'}">
<div class="total">
<div class="the_sum">
<span class="name">合计</span>
<span class="name">实付</span>
<span class="price">{{ Utils.isInteger(totalPrice) }}</span>
</div>
<!-- <div class="sun">
......@@ -283,7 +283,7 @@ export default {
}
.address {
margin-top: 18rpx;
margin-top: 17.81rpx;
.address_1 {
......@@ -323,7 +323,8 @@ export default {
.min {
color: #0050F6;
font-size: 28rpx;
font-size: 32rpx;
font-family: Futura-Medium, Futura;
font-weight: 700;
margin: 0 8rpx;
display: inline-block;
......@@ -336,7 +337,7 @@ export default {
background: #FFFFFF;
margin: 0 auto;
margin-top: 32rpx;
padding: 26rpx 32rpx 24rpx 32rpx;
padding: 26rpx 30rpx 24rpx 30rpx;
box-sizing: border-box;
......@@ -348,9 +349,9 @@ export default {
}
.goods {
margin-top: 24rpx;
margin-top: 24.95rpx;
border-bottom: 1px solid #ECECEC;
padding-bottom: 25rpx;
padding-bottom: 32rpx;
.goods_item {
display: flex;
......@@ -361,7 +362,7 @@ export default {
height: 112rpx;
width: 112rpx;
background-color: #eee;
margin-right: 31rpx;
margin-right: 32rpx;
}
.goods_text {
......@@ -402,7 +403,7 @@ export default {
}
.goods_psce {
margin-top: 18rpx;
margin-top: 20rpx;
}
}
}
......@@ -480,7 +481,7 @@ export default {
}
.priceBox{
display: flex;
align-items: flex-end;
align-items: center;
.paid_in {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
......@@ -503,7 +504,7 @@ export default {
.Payment_method {
width: 686rpx;
margin: 30rpx auto 0;
margin: 32rpx auto 0;
padding: 26rpx 30rpx;
background: #FFFFFF;
font-size: 28rpx;
......@@ -545,7 +546,7 @@ export default {
.the_sum {
display: flex;
align-items: flex-end;
align-items: center;
.name {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
......@@ -554,12 +555,12 @@ export default {
}
.price {
margin-left: 13rpx;
margin-left: 13.36rpx;
font-size: 36rpx;
font-family: Futura-Medium, Futura;
font-weight: 500;
color: #333333;
line-height: 40rpx;
line-height: 40rpx;
}
}
......
......@@ -2,7 +2,7 @@
<view class="menu-box">
<view class="menu-banner" :style="{'height':buied?'360rpx':'450rpx'}">
<video autoplay muted loop :controls="false" :enable-progress-gesture="false" objectFit='cover' src="http://songclound.oss-cn-hongkong.aliyuncs.com/2022/06/27/71d36be0ed966.mp4"></video>
<view class="shop-info" :style="'top:102rpx'">
<view class="shop-info" :style="'top:86rpx'">
<view class="shop-box">
<text @click="showArea" class="shop-name">{{ shopInfo.name }}</text>
<image class="arrow-right-select" :src="'../../static/imgs/jiantoubai.png'" />
......@@ -18,7 +18,7 @@
<view class="user-name" v-if="userms">HI!{{ userInfo.customerName || '我是谁' }}</view>
<view class="user-name" v-else>未登录</view>
<view class="dialog">
<view class="content" v-if="userms">如果以后再也见不到你,那就祝你早安</view>
<view class="content" v-if="userms">希望你今天,明天,天天都开心~</view>
<view class="content" v-if="!userms">请您尽快登录~</view>
</view>
</view>
......@@ -333,7 +333,7 @@ export default {
}
.arrow-right-select {
width: 9.27rpx;
width: 15.27rpx;
height: 21.68rpx;
// border: 3rpx solid #FFFFFF
}
......@@ -363,6 +363,7 @@ export default {
.login-area {
display: flex;
width: 686rpx;
height: 104rpx;
padding:18.8rpx 32rpx 18.8rpx 34rpx;
background: #ffffff;
position: absolute;
......@@ -415,7 +416,7 @@ export default {
}
}
.arrow-right-select{
width: 9.27rpx;
width: 15.27rpx;
height: 21.68rpx;
}
}
......
......@@ -37,36 +37,36 @@
<view class="right_box">
<view class="box" @click.stop="goToPage('coupon')">
<view class="left">
<h3>HOOLOO券</h3>
<view class="text">HOOLOO券</view>
</view>
<view class="right"><image class="icon" src="/static/imgs/youhuijuan.png"></image></view>
</view>
<view class="line"></view>
<view class="box_two" @click="goToPage('msg')">
<view class="left">
<h3>我的消息</h3>
<view class="text">我的消息</view>
</view>
<view class="right"><image class="icon" src="/static/imgs/xiaoxi.png"></image></view>
</view>
</view>
</view>
<view class="contents" v-if="!userms" :style="{'padding-bottom':'65rpx'}">
<button class="myOrder" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" style="line-height:1.5; margin-left:0rpx; margin-right:0rpx; padding-left:0rpx; padding-right:0rpx;">
<button class="myOrder" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" style="line-height:30rpx; margin-left:0rpx; margin-right:0rpx; padding-left:0rpx; padding-right:0rpx;">
<view class="text">我的订单</view>
<view><image class="icon" src="/static/imgs/dingdan.png"></image></view>
</button>
<view class="line"></view>
<view class="right_box">
<button class="box" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" style="line-height:1.5; margin-left:0rpx; margin-right:0rpx; padding-left:0rpx; padding-right:0rpx;">
<button class="box" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" style="line-height:30rpx; margin-left:0rpx; margin-right:0rpx; padding-left:0rpx; padding-right:0rpx;">
<view class="left">
<h3>HOOLOO券</h3>
<view class="text">HOOLOO券</view>
</view>
<view class="right"><image class="icon" src="/static/imgs/youhuijuan.png"></image></view>
</button>
<view class="line"></view>
<button class="box_two" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" style="line-height:1.5; margin-left:0rpx; margin-right:0rpx; padding-left:0rpx; padding-right:0rpx;">
<button class="box_two" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" style="line-height:30rpx; margin-left:0rpx; margin-right:0rpx; padding-left:0rpx; padding-right:0rpx;">
<view class="left">
<h3>我的消息</h3>
<view class="text">我的消息</view>
</view>
<view class="right"><image class="icon" src="/static/imgs/xiaoxi.png"></image></view>
</button>
......@@ -153,7 +153,7 @@ button::after {
.menu-banner {
position: relative;
.video{
height: 437rpx;
height: 436rpx;
}
.log {
......@@ -184,7 +184,7 @@ button::after {
.mod11 {
border-radius: 0rpx;
box-sizing: border-box;
padding: 36rpx 30rpx 36rpx 32rpx;
padding: 28.5rpx 30rpx 28.5rpx 32rpx;
width: 686rpx;
height: 136rpx;
background: #FFFFFF;
......@@ -203,7 +203,7 @@ button::after {
align-items: center;
width: 72rpx;
height: 72rpx;
margin-right: 31rpx;
margin-right: 32rpx;
border-radius: 4rpx;
image {
width: 100%;
......@@ -223,7 +223,6 @@ button::after {
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
margin-top: 3.5rpx;
}
.dialog {
......@@ -231,15 +230,15 @@ button::after {
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
margin-top: 8rpx;
margin-top: 7rpx;
.content {
flex: 1;
}
}
.arrow-right-select{
width: 9rpx;
height: 22rpx;
width: 15.27rpx;
height: 21.68rpx;
}
}
......@@ -263,8 +262,8 @@ button::after {
.contents {
display: flex;
padding: 52rpx 52rpx 52rpx 70rpx;
margin: 16rpx 32rpx 26rpx 32rpx;
padding: 52rpx 64rpx 52rpx 70rpx;
margin: 24rpx 32rpx 24rpx 32rpx;
align-items: center;
justify-content: space-between;
background: #FFFFFF;
......@@ -295,15 +294,15 @@ button::after {
}
.icon {
width: 94rpx;
width: 94.94rpx;
height:110rpx;
margin: 0 auto;
margin-top: 38rpx;
margin-top: 48.98rpx;
}
}
.line{
height: 197rpx;
height: 216rpx;
background: #E4E4E4;
border: 1rpx solid #E4E4E4;
}
......@@ -325,6 +324,7 @@ button::after {
overflow: initial;
height: 69rpx;
// background: #FF0000;
line-height: 30rpx;
background: #FFFFFF;
display: flex;
align-items: center;
......@@ -335,7 +335,7 @@ button::after {
text-align: center;
width: 154rpx;
h3 {
.text {
font-size: 28rpx;
font-family: Arial-BoldMT, Arial;
font-weight: normal;
......@@ -352,16 +352,19 @@ button::after {
.right {
.icon {
width: 91rpx;
height: 69rpx;
width: 93.89rpx;
height: 72.21rpx;
}
}
}
.box_two::after{
line-height: 30rpx;
}
.line {
width: 306rpx;
height: 2rpx;
border: 1rpx solid #E4E4E4;
margin: 34rpx 0rpx;
margin: 39.84rpx 0rpx 30.84rpx 0rpx;
}
.box {
overflow: initial;
......@@ -379,7 +382,7 @@ button::after {
text-align: center;
width: 154rpx;
h3 {
.text {
font-size: 28rpx;
font-family: Arial-BoldMT, Arial;
font-weight: normal;
......@@ -396,11 +399,14 @@ button::after {
.right {
.icon {
width: 91rpx;
height: 61rpx;
width: 91.59rpx;
height: 61.46rpx;
}
}
}
.box::after{
line-height: 30rpx;
}
}
}
......@@ -408,7 +414,7 @@ button::after {
width: 686rpx;
background: #FFFFFF;
margin: 0 auto;
padding: 22rpx 26rpx;
padding: 21rpx 30rpx 29rpx 26rpx;
box-sizing: border-box;
.title {
......@@ -432,7 +438,7 @@ button::after {
.function_item_text {
flex: 1;
margin: 0;
margin-left: 16rpx;
margin-left: 12rpx;
padding: 10rpx;
text-align: left;
line-height: 1;
......@@ -450,9 +456,9 @@ button::after {
}
.function_item_icon {
margin-left: auto;
width: 12rpx;
height: 21rpx;
margin-left: 6rpx;
width: 15.27rpx;
height: 21.68rpx;
}
}
}
......
......@@ -13,7 +13,7 @@
<image class="empty_icon" src="/static/imgs/weidengluzhanweitu.png"></image>
</view>
<view class="empty_text">——您还未登录,请先登录——</view>
<button class="empty_button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">品尝</button>
<button class="empty_button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">登录</button>
</view>
<view class="orders" :style="{'padding-bottom':orderBottom+'rpx'}">
<view class="order_item" v-for="item in list" :key="item.id" @click="openInfo(item)">
......@@ -250,7 +250,7 @@ export default {
.empty_text {
width: 500rpx;
margin-top: 32rpx;
margin-top: 32.73rpx;
text-align: center;
font-size: 24rpx;
......@@ -259,7 +259,7 @@ export default {
color: #999999;
}
.empty_button {
margin-top: 35rpx;
margin-top: 34.29rpx;
width: 167rpx;
height: 64rpx;
border-radius: 2rpx;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment