|
|
@@ -1,45 +1,118 @@
|
|
|
<template>
|
|
|
- <view style="background: #F8FAFE;">
|
|
|
+ <view>
|
|
|
<public-module></public-module>
|
|
|
<service-widget @btnClick="btn_click"></service-widget>
|
|
|
- <view class="header dis a-c j-s">
|
|
|
+ <view class="header dis a-c j-s" :style="transitionStyle">
|
|
|
<view class="city dis a-c ">
|
|
|
<image src="../../static/image/index/img/cityicon.png" mode=""></image>
|
|
|
<text>{{city}}</text>
|
|
|
<image src="../../static/image/index/img/jiantou.png" mode="" style="width: 12px;height: 12px;"></image>
|
|
|
</view>
|
|
|
- <image src="../../static/image/index/img/Scan.png" mode="" @click="scan"></image>
|
|
|
+ <view class="search" style="">
|
|
|
+ <u-search :show-action="true" action-text="搜索" bg-color="#fff" maxlength="10" placeholder="请输入关键词"
|
|
|
+ :clearabled="false" :action-style="{position: 'absolute',right:'10px'}" search-icon="0">
|
|
|
+ </u-search>
|
|
|
+ <image class="search-Scan" src="../../static/image/index/img/Scan.png" mode="" @click="scan">
|
|
|
+ </image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 占位块 -->
|
|
|
+ <view class="place"></view>
|
|
|
+ <view class="swiperelement" :style="transitionStyle">
|
|
|
+ <u-swiper :list="swiperlist" height="238" duration="400" interval="4000" mode="rect"
|
|
|
+ @change="swiperChange"></u-swiper>
|
|
|
</view>
|
|
|
- <view class="page">
|
|
|
- <!-- 认证提示 -->
|
|
|
- <view class="dis a-c j-s">
|
|
|
- <view class="frequentClasses dis f-c " :style="{backgroundImage:`url(${item.img})`}"
|
|
|
- v-for="(item,index) in frequentClassesList" :key="index" @click="tapEvent(item)">
|
|
|
- <text>{{item.title}}</text>
|
|
|
- <text>{{item.description}}</text>
|
|
|
+ <view class="pagebody">
|
|
|
+ <index-nav :resdata="categoryList" :row="2" @authModal="authModal" style="margin-bottom: 14px;"></index-nav>
|
|
|
+ <view class="mt-2 dis j-s a-c">
|
|
|
+ <view class="activity dis f-c ">
|
|
|
+ <text>签到有礼</text>
|
|
|
+ <text>福利多多</text>
|
|
|
+ <image src="../../static/image/index/pick-img/1.png" mode="" style="width: 32px;height: 32px;">
|
|
|
+ </image>
|
|
|
+ </view>
|
|
|
+ <view class="activity dis f-c ">
|
|
|
+ <text>精彩任务</text>
|
|
|
+ <text>奖励多多</text>
|
|
|
+ <image src="../../static/image/index/pick-img/2.png" mode="" style="width: 36px;height: 32px;">
|
|
|
+ </image>
|
|
|
+ </view>
|
|
|
+ <view class="activity dis f-c ">
|
|
|
+ <text>限时秒杀</text>
|
|
|
+ <text>9.9元起</text>
|
|
|
+ <image src="../../static/image/index/pick-img/3.png" mode="" style="width: 32px;height: 32px;">
|
|
|
+ </image>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <index-nav :resdata="categoryList" :row="1" style="margin: 14px 0;"></index-nav>
|
|
|
- <view class="banner">
|
|
|
- <image mode="widthFix" src="/static/image/index/ad-img/ad.png" @click="back"></image>
|
|
|
- </view>
|
|
|
- <view class="topProducts dis f-c ">
|
|
|
- <text class="title mt-2 mb-2">精选产品</text>
|
|
|
- <view class="data dis f-c">
|
|
|
- <view class="Product dis a-c " v-for="(item,index) in pickList" :key="index">
|
|
|
- <image :src="item.img" mode=""></image>
|
|
|
- <view class="dis f-c a-start item">
|
|
|
- <text
|
|
|
- style="color: #232832;font-size: 16px;font-weight: bold;letter-spacing: 1px;">{{item.title}}</text>
|
|
|
- <text style="color: rgba(35, 40, 50, 0.6);font-size: 12px;">{{item.sum}}人购买</text>
|
|
|
- <view class="dis a-c">
|
|
|
- <view class="slogan" :style="{backgroundColor:itemslogan.back,color:itemslogan.color}"
|
|
|
- v-for="(itemslogan,indexslogan) in item.slogan" :key="indexslogan">
|
|
|
- <text>{{itemslogan.name}}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <text style="color: rgba(35, 40, 50, 0.6);font-size: 12px;"><text
|
|
|
- style="color: #FF6C29;font-size: 16px;margin-right: 3px;">{{item.price}}</text>/年起</text>
|
|
|
+ <view class="mt-3 dis j-s ">
|
|
|
+ <view class="flashSale dis f-c">
|
|
|
+ <image class="bg1" src="../../static/image/index/pick-img/bg1.png" mode=""></image>
|
|
|
+ <view class="title dis j-s">
|
|
|
+ <image src="../../static/image/index/pick-img/4.png" mode="widthFix"
|
|
|
+ style="width: 73px;height: 25px;"></image>
|
|
|
+ <view class="dis a-c">
|
|
|
+ <image src="../../static/image/index/pick-img/loding.png" mode=""
|
|
|
+ style="width: 12px;height: 12px;"></image>
|
|
|
+ <text>换一批</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="dis j-s a-c mt-2">
|
|
|
+ <image src="../../static/image/index/pick-img/5.png" mode="" style="width: 53px;height: 53px;">
|
|
|
+ </image>
|
|
|
+ <image src="../../static/image/index/pick-img/8.png" mode="" style="width: 80px;height: 56px;">
|
|
|
+ </image>
|
|
|
+ </view>
|
|
|
+ <view class="dis j-s a-c mt-2">
|
|
|
+ <image src="../../static/image/index/pick-img/6.png" mode="" style="width: 53px;height: 53px;">
|
|
|
+ </image>
|
|
|
+ <image src="../../static/image/index/pick-img/9.png" mode="" style="width: 80px;height: 56px;">
|
|
|
+ </image>
|
|
|
+ </view>
|
|
|
+ <view class="dis j-s a-c mt-2">
|
|
|
+ <image src="../../static/image/index/pick-img/7.png" mode="" style="width: 53px;height: 53px;">
|
|
|
+ </image>
|
|
|
+ <image src="../../static/image/index/pick-img/8.png" mode="" style="width: 80px;height: 56px;">
|
|
|
+ </image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="hotSaleList dis f-c">
|
|
|
+ <image class="bg1" src="../../static/image/index/pick-img/bg2.png" mode=""></image>
|
|
|
+ <view class="title dis j-s">
|
|
|
+ <text style="font-size: 17px;color: #333;font-weight: bold;">热销榜</text>
|
|
|
+ <view class="dis a-c">
|
|
|
+ <image src="../../static/image/index/pick-img/loding.png" mode=""
|
|
|
+ style="width: 12px;height: 12px;"></image>
|
|
|
+ <text>换一批</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mt-2 dis a-c j-s content" style="position: relative;">
|
|
|
+ <image src="../../static/image/index/pick-img/10.png" mode=""
|
|
|
+ style="width: 53px;height: 53px;margin-right: 8px;">
|
|
|
+ </image>
|
|
|
+ <view class="dis f-c " style="width: 55%;">
|
|
|
+ <text style="font-size: 12px;color: #333;line-height: 1.2;">车仆后视镜弹水剂 新升级...</text>
|
|
|
+ <text style="color: #FF476C;font-size: 12px;">￥ <text
|
|
|
+ style="font-size: 15px;font-weight: bold;line-height: 1.2;">79</text> </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mt-2 dis a-c j-s " style="position: relative;">
|
|
|
+ <image src="../../static/image/index/pick-img/11.png" mode=""
|
|
|
+ style="width: 53px;height: 53px;margin-right: 8px;">
|
|
|
+ </image>
|
|
|
+ <view class="dis f-c " style="width: 55%;">
|
|
|
+ <text style="font-size: 12px;color: #333;line-height: 1.2;">朗龙汽车香水车载香薰摆...</text>
|
|
|
+ <text style="color: #FF476C;font-size: 12px;">￥ <text
|
|
|
+ style="font-size: 15px;font-weight: bold; line-height: 1.2;">65.9</text> </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class=" dis a-c j-s mt-2" style="position: relative;">
|
|
|
+ <image src="../../static/image/index/pick-img/12.png" mode=""
|
|
|
+ style="width: 53px;height: 53px;margin-right: 8px;">
|
|
|
+ </image>
|
|
|
+ <view class="dis f-c a-start " style="width: 55%;">
|
|
|
+ <text style="font-size: 12px;color: #333;line-height: 1.2;">新车除甲醛除异味车内除...</text>
|
|
|
+ <text style="color: #FF476C;font-size: 12px;">￥ <text
|
|
|
+ style="font-size: 15px;font-weight: bold;line-height: 1.2;">29.5</text> </text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -70,6 +143,7 @@
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+
|
|
|
authShow: false,
|
|
|
locationshow: false,
|
|
|
avatar: "",
|
|
|
@@ -101,72 +175,85 @@
|
|
|
banben: {},
|
|
|
bgColor: "#4B75EB",
|
|
|
//轮播
|
|
|
- //分类
|
|
|
- frequentClassesList: [{
|
|
|
+ categoryList: [{
|
|
|
cat_id: 0,
|
|
|
- img: '../../static/image/index/category-img/1.png',
|
|
|
+ img: '/static/image/index/category-img/1.png',
|
|
|
title: '车险',
|
|
|
- description: "快速比价",
|
|
|
- src: '/pages/carInsure/entry'
|
|
|
+ src: '/pages/carInsure/entry',
|
|
|
+ width: '40px',
|
|
|
+ height: '30px',
|
|
|
},
|
|
|
{
|
|
|
cat_id: 1,
|
|
|
img: '/static/image/index/category-img/2.png',
|
|
|
- title: '道路救援',
|
|
|
- description: "紧急预警",
|
|
|
- src: '/pages/roadRescue/index'
|
|
|
+ title: '车损测算',
|
|
|
+ width: '40px',
|
|
|
+ height: '30px',
|
|
|
+ // src: '/pages/carInsure2/entry'
|
|
|
},
|
|
|
{
|
|
|
cat_id: 2,
|
|
|
img: '/static/image/index/category-img/3.png',
|
|
|
- title: '审车',
|
|
|
- description: "用车无烦恼",
|
|
|
- src: ''
|
|
|
+ title: '道路救援',
|
|
|
+ src: '/pages/roadRescue/index',
|
|
|
+ width: '40px',
|
|
|
+ height: '30px',
|
|
|
},
|
|
|
{
|
|
|
cat_id: 3,
|
|
|
img: '/static/image/index/category-img/4.png',
|
|
|
- title: '车检代办',
|
|
|
- description: "便捷处理",
|
|
|
- src: '/pages/caragent/index'
|
|
|
+ title: '司法鉴定',
|
|
|
+ width: '40px',
|
|
|
+ height: '30px',
|
|
|
+ src: '',
|
|
|
+
|
|
|
},
|
|
|
- ],
|
|
|
- categoryList: [{
|
|
|
- cat_id: 0,
|
|
|
+ {
|
|
|
+ cat_id: 4,
|
|
|
img: '/static/image/index/category-img/5.png',
|
|
|
- title: '车损测算',
|
|
|
- // src: '/pages/carInsure2/entry'
|
|
|
+ title: '掌柜商城',
|
|
|
+ width: '40px',
|
|
|
+ height: '30px',
|
|
|
+ src: ''
|
|
|
},
|
|
|
{
|
|
|
- cat_id: 1,
|
|
|
+ cat_id: 5,
|
|
|
img: '/static/image/index/category-img/6.png',
|
|
|
- title: '司法鉴定',
|
|
|
+ title: '洗车',
|
|
|
+ width: '32px',
|
|
|
+ height: '32px',
|
|
|
src: ''
|
|
|
},
|
|
|
{
|
|
|
- cat_id: 2,
|
|
|
+ cat_id: 6,
|
|
|
img: '/static/image/index/category-img/7.png',
|
|
|
- title: '掌柜商城',
|
|
|
- src: ''
|
|
|
+ title: '车检代办',
|
|
|
+ width: '32px',
|
|
|
+ height: '32px',
|
|
|
+ src: '/pages/caragent/index'
|
|
|
},
|
|
|
{
|
|
|
- cat_id: 3,
|
|
|
+ cat_id: 7,
|
|
|
img: '/static/image/index/category-img/8.png',
|
|
|
- title: '洗车',
|
|
|
+ title: '审车',
|
|
|
+ width: '32px',
|
|
|
+ height: '32px',
|
|
|
src: ''
|
|
|
},
|
|
|
-
|
|
|
{
|
|
|
- cat_id: 4,
|
|
|
+ cat_id: 8,
|
|
|
img: '/static/image/index/category-img/9.png',
|
|
|
title: '代驾',
|
|
|
+ width: '32px',
|
|
|
+ height: '32px',
|
|
|
src: ''
|
|
|
},
|
|
|
-
|
|
|
{
|
|
|
- cat_id: 5,
|
|
|
+ cat_id: 9,
|
|
|
img: '/static/image/index/category-img/10.png',
|
|
|
title: '一键挪车',
|
|
|
+ width: '32px',
|
|
|
+ height: '32px',
|
|
|
src: '/pages/ticket/ticket'
|
|
|
}
|
|
|
],
|
|
|
@@ -243,7 +330,19 @@
|
|
|
title: "平安行.境内节假日出行意..."
|
|
|
},
|
|
|
],
|
|
|
-
|
|
|
+ swiperlist: [{
|
|
|
+ image: '/static/image/index/ad-img/ad1.png',
|
|
|
+ backgroundColor: '#3385F5'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ image: '/static/image/index/ad-img/ad2.png',
|
|
|
+ backgroundColor: '#F5B333'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ image: '/static/image/index/ad-img/ad3.png',
|
|
|
+ backgroundColor: '#FF6591'
|
|
|
+ }
|
|
|
+ ],
|
|
|
headerPosition: "fixed",
|
|
|
getApplicationStatus: "",
|
|
|
socketOpen: false,
|
|
|
@@ -257,10 +356,12 @@
|
|
|
poiName: "",
|
|
|
cityCode: "",
|
|
|
messageInterval: null,
|
|
|
+ transitionStyle: {
|
|
|
+ backgroundColor: '#3385F5',
|
|
|
+ }
|
|
|
};
|
|
|
},
|
|
|
|
|
|
-
|
|
|
computed: {
|
|
|
...mapState(['userInfo'])
|
|
|
},
|
|
|
@@ -290,19 +391,17 @@
|
|
|
// #endif
|
|
|
|
|
|
},
|
|
|
- async onLoad() {
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- },
|
|
|
+ async onLoad() {},
|
|
|
async onPullDownRefresh() {
|
|
|
await this.loginUser();
|
|
|
uni.stopPullDownRefresh();
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
},
|
|
|
methods: {
|
|
|
+ swiperChange(index) {
|
|
|
+ let color = this.swiperlist.find((val, ele) => ele == index);
|
|
|
+ this.transitionStyle.backgroundColor = color.backgroundColor;
|
|
|
+
|
|
|
+ },
|
|
|
async loginUser() {
|
|
|
let userInfoRes = await this.$http.get('/user/loginUser')
|
|
|
store.commit('setUserModules', {
|
|
|
@@ -314,37 +413,10 @@
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
- tapEvent(item) {
|
|
|
- if (this.userInfo.sysUser.status == '0' && this.userInfo.sysUser.managementSource == '2') {
|
|
|
- if (this.userInfo.sysUser.factorVerify == '2') {
|
|
|
- uni.navigateTo({
|
|
|
- url: "/pages/user/authInfo"
|
|
|
- })
|
|
|
- } else {
|
|
|
- this.authShow = true;
|
|
|
- }
|
|
|
- } else if (this.userInfo.sysUser.status == '8' || this.userInfo.sysUser.status == '3') {
|
|
|
- uni.navigateTo({
|
|
|
- url: "/pages/user/practitionerInfo"
|
|
|
- })
|
|
|
- } else if (this.userInfo.sysUser.status == '2') {
|
|
|
- uni.navigateTo({
|
|
|
- url: "/pages/user/authResult1"
|
|
|
- })
|
|
|
- } else if (this.userInfo.sysUser.status == '1') {
|
|
|
- if (!item.src || item.src == '#' || item.src == '') {
|
|
|
- uni.showToast({
|
|
|
- icon: "none",
|
|
|
- title: '正在开发中...',
|
|
|
- duration: 1500
|
|
|
- })
|
|
|
- } else {
|
|
|
- this.navigate({
|
|
|
- url: item.src
|
|
|
- }, "navigateTo", true)
|
|
|
- }
|
|
|
- }
|
|
|
+ authModal(res) {
|
|
|
+ this.authShow = res;
|
|
|
},
|
|
|
+
|
|
|
btn_click() {
|
|
|
uni.navigateTo({
|
|
|
url: '/pages/chat/chat'
|
|
|
@@ -467,58 +539,7 @@
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
- // 验证银行卡
|
|
|
- async validateBankCard() {
|
|
|
- var that = this;
|
|
|
- that.bankname = "";
|
|
|
- await bankBin.getBankBin(this.form.name4)
|
|
|
- .then((data) => {
|
|
|
- that.form.name5 = data.bankName;
|
|
|
- return true;
|
|
|
- })
|
|
|
- .catch((err) => {
|
|
|
- return uni.showToast({
|
|
|
- title: err.split(":")[1],
|
|
|
- icon: "none"
|
|
|
- });
|
|
|
- })
|
|
|
- },
|
|
|
|
|
|
- //点击通知
|
|
|
- async click(index) {
|
|
|
- let res1 = await this.$http.get('/apps/getApplicationStatus?jobNumber=' + this.userInfo.sysUser.id);
|
|
|
- if (res1.code == 200) {
|
|
|
- this.getApplicationStatus = res1.data;
|
|
|
- if (this.getApplicationStatus == '0') {
|
|
|
- uni.showToast({
|
|
|
- icon: "none",
|
|
|
- title: '实名认证等待审核中',
|
|
|
- duration: 1500
|
|
|
- })
|
|
|
- } else if (this.getApplicationStatus == '3') {
|
|
|
- uni.showToast({
|
|
|
- icon: "none",
|
|
|
- title: '实名认证不通过，请修改后提交',
|
|
|
- duration: 1500
|
|
|
- })
|
|
|
- setTimeout(() => {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/user/certification'
|
|
|
- })
|
|
|
- }, 1000)
|
|
|
- }
|
|
|
- } else if (res1.code != '200') {
|
|
|
- setTimeout(() => {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/user/infoInput'
|
|
|
- })
|
|
|
- }, 1000)
|
|
|
- }
|
|
|
- if (res1.code == 200) {
|
|
|
- this.getApplicationStatus = res1.data;
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
//扫一扫
|
|
|
scan() {
|
|
|
uni.scanCode({
|
|
|
@@ -554,11 +575,27 @@
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
- page {
|
|
|
- background: #F8FAFE;
|
|
|
+ @import '@/style/mixin.scss';
|
|
|
+
|
|
|
+ /deep/ {
|
|
|
+ .u-content {
|
|
|
+ padding-left: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-indicator-item-rect-active {
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-indicator-item-rect {
|
|
|
+ border-radius: 2px;
|
|
|
+ height: 3px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
|
|
|
+ page {
|
|
|
+ background-color: #EEF1F7;
|
|
|
+ }
|
|
|
|
|
|
.status {
|
|
|
width: 100%;
|
|
|
@@ -579,7 +616,7 @@
|
|
|
right: 0;
|
|
|
z-index: 996;
|
|
|
padding: 60px 16px 16px;
|
|
|
- background-color: #fff;
|
|
|
+ transition: background-color 0.5s;
|
|
|
|
|
|
.city {
|
|
|
color: #fff;
|
|
|
@@ -591,7 +628,7 @@
|
|
|
}
|
|
|
|
|
|
text {
|
|
|
- color: #333;
|
|
|
+ color: #fff;
|
|
|
font-size: 13px;
|
|
|
margin: 0 5px;
|
|
|
}
|
|
|
@@ -602,194 +639,146 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- image {
|
|
|
- width: 22px;
|
|
|
- height: 22px;
|
|
|
+ .search {
|
|
|
+ position: relative;
|
|
|
+ width: 70%;
|
|
|
+
|
|
|
+ .search-Scan {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ position: absolute;
|
|
|
+ left: 10px;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ margin: auto;
|
|
|
+ padding-right: 5px;
|
|
|
+
|
|
|
+ ::after {
|
|
|
+ content: "";
|
|
|
+ width: 0px;
|
|
|
+ height: 13px;
|
|
|
+ border: 1px solid #DDDDDD;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiperelement {
|
|
|
+ height: 70px;
|
|
|
+ border-radius: 0px 0px 20px 0px;
|
|
|
+ padding: 10px 16px 0;
|
|
|
+ transition: background-color 0.5s;
|
|
|
+ /* 渐变效果 */
|
|
|
+
|
|
|
+ ::after {
|
|
|
+ content: "";
|
|
|
+ display: table;
|
|
|
+ clear: both;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .page {
|
|
|
- padding: 115px 16px 16px 16px;
|
|
|
+ .pagebody {
|
|
|
+ padding: 75px 16px 16px;
|
|
|
+ height: calc(100vh - 180px);
|
|
|
+ background-color: #F8F8FA;
|
|
|
|
|
|
- .frequentClasses {
|
|
|
- width: 148rpx;
|
|
|
- height: 148rpx;
|
|
|
- padding: 5px;
|
|
|
- background-size: cover;
|
|
|
+ .activity {
|
|
|
+ width: 30%;
|
|
|
+ background: #FFFFFF;
|
|
|
+ padding: 8px;
|
|
|
+ border-radius: 6px;
|
|
|
+ position: relative;
|
|
|
|
|
|
text:nth-child(1) {
|
|
|
- color: #fff;
|
|
|
- font-size: 28rpx;
|
|
|
- line-height: 1;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333333;
|
|
|
+ font-weight: bold;
|
|
|
}
|
|
|
|
|
|
text:nth-child(2) {
|
|
|
- color: #fff;
|
|
|
- font-size: 22rpx;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .topProducts {
|
|
|
- .title {
|
|
|
- color: #232832;
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: bold;
|
|
|
+ image {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .data {
|
|
|
- background: #FFFFFF;
|
|
|
- box-shadow: 0px 2px 5px 0px #DAE3F4;
|
|
|
- border-radius: 6px;
|
|
|
- padding: 16px;
|
|
|
+ .flashSale {
|
|
|
+ width: 48%;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 6px;
|
|
|
+ position: relative;
|
|
|
+ padding: 8px;
|
|
|
+
|
|
|
+ .bg1 {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 67px;
|
|
|
}
|
|
|
|
|
|
- .Product {
|
|
|
- margin-bottom: 14px;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 85px;
|
|
|
- height: 85px;
|
|
|
- margin-right: 14px;
|
|
|
- }
|
|
|
-
|
|
|
- .item {
|
|
|
- line-height: 1.5;
|
|
|
+ .title {
|
|
|
+ position: relative;
|
|
|
|
|
|
- .slogan {
|
|
|
- padding: 1px 3px;
|
|
|
- border-radius: 2px;
|
|
|
- font-size: 22rpx;
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
+ text {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #999;
|
|
|
+ margin-left: 3px;
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /* 占位 */
|
|
|
- .place {
|
|
|
- /* #ifdef APP-PLUS */
|
|
|
- margin-top: var(--status-bar-height);
|
|
|
- /* #endif */
|
|
|
- height: 106upx;
|
|
|
- }
|
|
|
-
|
|
|
- .pick {
|
|
|
- padding: 0 2.5vw 2.5vw 2.5vw;
|
|
|
- }
|
|
|
-
|
|
|
- .pick .box {
|
|
|
- width: 100%;
|
|
|
- border-radius: 20upx;
|
|
|
- background-color: #ffffff;
|
|
|
- }
|
|
|
-
|
|
|
- .pick .box .title {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: flex-end;
|
|
|
- height: 60upx;
|
|
|
- border-bottom: solid 1upx #eee;
|
|
|
- padding-bottom: 10upx;
|
|
|
- }
|
|
|
-
|
|
|
- .pick .box .title .big {
|
|
|
- font-size: 34upx;
|
|
|
- padding-left: 20upx;
|
|
|
- color: #46434f;
|
|
|
- }
|
|
|
|
|
|
- .pick .box .title .small {
|
|
|
- font-size: 24upx;
|
|
|
- padding-left: 20upx;
|
|
|
- color: #827f8b;
|
|
|
- }
|
|
|
-
|
|
|
- .pick .box .product-list {
|
|
|
- padding-top: 15upx;
|
|
|
- box-sizing: border-box;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- .pick .box .product-list>view {
|
|
|
- background-color: #f8f8f8;
|
|
|
- display: inline-block;
|
|
|
- width: calc(50% - 10upx);
|
|
|
- position: relative;
|
|
|
- box-sizing: border-box;
|
|
|
- margin: 5upx;
|
|
|
- float: left;
|
|
|
- }
|
|
|
+ .hotSaleList {
|
|
|
+ width: 48%;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 6px;
|
|
|
+ position: relative;
|
|
|
+ padding: 8px;
|
|
|
+
|
|
|
+ .bg1 {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 67px;
|
|
|
+ }
|
|
|
|
|
|
- .pick .box .product-list>view:nth-child(1) {
|
|
|
- height: 390upx;
|
|
|
- }
|
|
|
+ .title {
|
|
|
+ position: relative;
|
|
|
|
|
|
- .pick .box .product-list>view:nth-child(2),
|
|
|
- .pick .box .product-list>view:nth-child(3) {
|
|
|
- height: 190upx;
|
|
|
- }
|
|
|
+ text {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #999;
|
|
|
+ margin-left: 3px;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .pick .box .product-list>view:nth-child(1) .price {
|
|
|
- color: #e65339;
|
|
|
- font-size: 26upx;
|
|
|
- position: absolute;
|
|
|
- bottom: 6upx;
|
|
|
- left: 8upx;
|
|
|
- }
|
|
|
|
|
|
- .pick .box .product-list>view:nth-child(1) .slogan {
|
|
|
- color: #807c87;
|
|
|
- font-size: 26upx;
|
|
|
- position: absolute;
|
|
|
- bottom: 6upx;
|
|
|
- right: 15upx;
|
|
|
- }
|
|
|
|
|
|
- .pick .box .product-list>view:nth-child(1) image {
|
|
|
- width: 100%;
|
|
|
- height: 350upx !important;
|
|
|
- padding: 15upx;
|
|
|
- box-sizing: border-box;
|
|
|
- margin-bottom: 40upx;
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- .pick .box .product-list>view:nth-child(2),
|
|
|
- .pick .box .product-list>view:nth-child(3) {
|
|
|
- padding: 10upx;
|
|
|
- box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
- .pick .box .product-list>view:nth-child(2) image,
|
|
|
- .pick .box .product-list>view:nth-child(3) image {
|
|
|
- width: calc(50% - 5upx);
|
|
|
- height: 170upx !important;
|
|
|
+ /* 占位 */
|
|
|
+ .place {
|
|
|
+ height: 108px;
|
|
|
}
|
|
|
|
|
|
- .pick .box .product-list>view:nth-child(2) .price,
|
|
|
- .pick .box .product-list>view:nth-child(3) .price {
|
|
|
- position: absolute;
|
|
|
- top: 25%;
|
|
|
- left: 55%;
|
|
|
- color: #e65339;
|
|
|
- font-size: 30upx;
|
|
|
- }
|
|
|
|
|
|
- .pick .box .product-list>view:nth-child(2) .slogan,
|
|
|
- .pick .box .product-list>view:nth-child(3) .slogan {
|
|
|
- position: absolute;
|
|
|
- top: 60%;
|
|
|
- left: 55%;
|
|
|
- color: #807c87;
|
|
|
- font-size: 26upx;
|
|
|
- }
|
|
|
|
|
|
- .banner image {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
|
|
|
.goods-list {
|
|
|
background-color: #f4f4f4;
|
