|
|
@@ -0,0 +1,661 @@
|
|
|
+<template>
|
|
|
+ <view class="home">
|
|
|
+ <zs-skeleton :loading="loading"></zs-skeleton>
|
|
|
+
|
|
|
+ <zs-banner :city="city" :background="background" position @search="handleSearch"></zs-banner>
|
|
|
+
|
|
|
+ <view class="login-home">
|
|
|
+
|
|
|
+ <view class="discount-list">
|
|
|
+ <view class="discount-item" v-for="(item,index) in discountsList" :key="index" @click="goDetail(item.domainUrl,item.id,item.secondaryImg,item.menuName)">
|
|
|
+ <image class="icon" :src="item.imgUrl" mode=""></image>
|
|
|
+ <view class="title">{{item.menuName}}</view>
|
|
|
+ <view class="tag" v-if="item.labelAbove">
|
|
|
+ {{item.labelAbove}}
|
|
|
+ </view>
|
|
|
+ <view class="desc">
|
|
|
+ {{item.labelBelow || ''}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="swiper-box">
|
|
|
+ <view class="progress">
|
|
|
+ {{current+1+'/'+advList.length}}
|
|
|
+ </view>
|
|
|
+ <swiper class="swiper" @change="swiperChange" :current="current" :indicator-dots="false" circular :autoplay="true"
|
|
|
+ :interval="3000" :duration="1000">
|
|
|
+ <swiper-item v-for="(item,index) in advList" :key="item.id" @click="jump(item.jumpUrl)">
|
|
|
+ <image class="swiper-item" mode="" :src="item.advertsImg">
|
|
|
+ </image>
|
|
|
+ </swiper-item>
|
|
|
+
|
|
|
+ </swiper>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <view class="content">
|
|
|
+
|
|
|
+
|
|
|
+ <zs-list class="store-box" mt="0" @load="loadMore" :status="status">
|
|
|
+ <view class="left">
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <view class="store-item" v-for="(item,index) in list" :key="index" @click="goGoodsDetail(item)">
|
|
|
+ <template v-if="item.isAdv">
|
|
|
+ <image class="ad" :src="item.advertsImg" mode="widthFix"></image>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <zs-img :src="item.goodsVos[0].goodsImg" width="340rpx" height="340rpx" mode="widthFix"></zs-img>
|
|
|
+ <view class="info">
|
|
|
+ <view class="title">
|
|
|
+ {{item.goodsVos[0].goodsName}}
|
|
|
+ </view>
|
|
|
+ <view class="desc">
|
|
|
+ {{item.goodsVos[0].goodsDescribe}}
|
|
|
+ </view>
|
|
|
+ <view class="price-box">
|
|
|
+ <view class="left">
|
|
|
+ <view class="unit">
|
|
|
+ ￥
|
|
|
+ </view>
|
|
|
+ <view class="price">
|
|
|
+ {{item.goodsVos[0].realPrice}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="right">
|
|
|
+ 销量{{item.goodsVos[0].saleNum}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="right">
|
|
|
+
|
|
|
+ <view class="store-item" v-for="(item,index) in list1" :key="index" @click="goGoodsDetail(item)">
|
|
|
+ <template v-if="item.isAdv">
|
|
|
+ <image class="ad" :src="item.advertsImg" mode="widthFix"></image>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <zs-img :src="item.goodsVos[0].goodsImg" width="340rpx" height="340rpx" mode="widthFix"></zs-img>
|
|
|
+ <view class="info">
|
|
|
+ <view class="title">
|
|
|
+ {{item.goodsVos[0].goodsName}}
|
|
|
+ </view>
|
|
|
+ <view class="desc">
|
|
|
+ {{item.goodsVos[0].goodsDescribe}}
|
|
|
+ </view>
|
|
|
+ <view class="price-box">
|
|
|
+ <view class="left">
|
|
|
+ <view class="unit">
|
|
|
+ ￥
|
|
|
+ </view>
|
|
|
+ <view class="price">
|
|
|
+ {{item.goodsVos[0].realPrice}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="right">
|
|
|
+ 销量{{item.goodsVos[0].saleNum}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </zs-list>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <zs-tab-bar :value="2"></zs-tab-bar>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ getUserDetail,
|
|
|
+ getMenu,
|
|
|
+ getAdv
|
|
|
+ } from '@/api/common.js'
|
|
|
+ import { search } from '@/api/shop.js';
|
|
|
+ // 腾讯地图
|
|
|
+ var QQMapWX = require('../../libs/qqmap-wx-jssdk.min.js');
|
|
|
+ var qqmapsdk = new QQMapWX({key:'KX5BZ-B64RC-RO62W-AMWAZ-VVTC3-YAFXF'});
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ background:false,
|
|
|
+ loading: false,
|
|
|
+ userId: '',
|
|
|
+ city:'定位中',
|
|
|
+ status: 'more',
|
|
|
+ current:0,
|
|
|
+ bannerList:[],
|
|
|
+ discountsList: [],//菜单
|
|
|
+ advList:[],
|
|
|
+ advList1:[],
|
|
|
+ list: [],
|
|
|
+ list1: [],
|
|
|
+ query:{
|
|
|
+ queryName:'',
|
|
|
+ 'location.lat':0,
|
|
|
+ 'location.lon':0,
|
|
|
+ pageCurrent:1,
|
|
|
+ pageSize:10
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ // swiper变动
|
|
|
+ swiperChange(val) {
|
|
|
+ this.current = val.target.current
|
|
|
+ },
|
|
|
+ jump(url){
|
|
|
+ uni.reLaunch({
|
|
|
+ url
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 点击搜索
|
|
|
+ handleSearch(){
|
|
|
+ if(!uni.getStorageSync('token')){
|
|
|
+ return uni.showModal({
|
|
|
+ title:'请登录',
|
|
|
+ confirmText:'去登录',
|
|
|
+ success(res){
|
|
|
+ console.log(res);
|
|
|
+ if(res.confirm){
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'/login/login/login?redirect=/pages/index/index'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ uni.reLaunch({
|
|
|
+ url:'./search'
|
|
|
+ })
|
|
|
+ // if(!val) return
|
|
|
+ // this.query.queryName = val
|
|
|
+ // this.query.pageCurrent = 1
|
|
|
+ // this.list = []
|
|
|
+ // this.list1 = []
|
|
|
+ // this.status = 'more'
|
|
|
+ // this.search()
|
|
|
+ },
|
|
|
+ // 获取当前城市
|
|
|
+ getCity(){
|
|
|
+ let that = this
|
|
|
+ return new Promise((resolve,reject)=>{
|
|
|
+ uni.getLocation({
|
|
|
+ type: 'gcj02',
|
|
|
+ success: (res) => {
|
|
|
+ // 解析地址
|
|
|
+ that.query['location.lat'] = res.latitude
|
|
|
+ that.query['location.lon'] = res.longitude
|
|
|
+ // 存储经纬度
|
|
|
+ uni.setStorageSync('location',JSON.stringify({latitude:res.latitude,longitude:res.longitude}))
|
|
|
+ qqmapsdk.reverseGeocoder({
|
|
|
+ location: {
|
|
|
+ latitude: res.latitude,
|
|
|
+ longitude: res.longitude
|
|
|
+ },
|
|
|
+ success: function(res) {
|
|
|
+ // 市
|
|
|
+ that.city = res.result.address_component.city
|
|
|
+ console.log(9999,that.city,res);
|
|
|
+ if(uni.setStorageSync('districtList')&&uni.getStorageSync('city')==that.city) return
|
|
|
+ uni.setStorageSync('city',res.result.address_component.city)
|
|
|
+ // 获取市区的行政区
|
|
|
+ qqmapsdk.getDistrictByCityId({
|
|
|
+ // 传入对应省份ID获得城市数据，传入城市ID获得区县数据,依次类推
|
|
|
+ id: res.result.ad_info.city_code.substr(3), //对应接口getCityList返回数据的Id，如：北京是'110000'
|
|
|
+ success: function(res) {//成功后的回调
|
|
|
+ console.log('对应城市ID下的区县数据：', res.result[0]);
|
|
|
+ let data = res.result[0]
|
|
|
+ data.map(item=>{
|
|
|
+ item.label = item.fullname
|
|
|
+ })
|
|
|
+ uni.setStorageSync('districtList',JSON.stringify(data))
|
|
|
+ },
|
|
|
+ fail: function(error) {
|
|
|
+ console.error(error);
|
|
|
+ },
|
|
|
+ complete: function(res) {
|
|
|
+ console.log(res);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ resolve()
|
|
|
+ },
|
|
|
+ fail: function(res) {
|
|
|
+ that.city = '定位失败'
|
|
|
+ },
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ fail: () => {
|
|
|
+ console.log("获取经纬度失败");
|
|
|
+ },
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 跳转优惠详情
|
|
|
+ goDetail(url,id,banner,title) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `${url}?id=${id}&title=${title}`,
|
|
|
+ success(res) {
|
|
|
+ res.eventChannel.emit('banner', banner)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ goGoodsDetail(item) {
|
|
|
+ uni.setStorageSync('shopInfo', JSON.stringify(item))
|
|
|
+ uni.reLaunch({
|
|
|
+ url: `../../detail/goodsDetail/index?id=${item.goodsVos[0].goodsId}`
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 更多套餐
|
|
|
+ handleMore() {
|
|
|
+ uni.reLaunch({
|
|
|
+ // url:'../../login/login/login'
|
|
|
+ url: '../../combo/combo/combo'
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取用户详情
|
|
|
+ getUserDetail() {
|
|
|
+ getUserDetail().then(res => {
|
|
|
+ uni.setStorageSync('userInfo', JSON.stringify(res.content))
|
|
|
+ })
|
|
|
+ },
|
|
|
+ loadMore() {
|
|
|
+ if(this.query['location.lat']&&this.query['location.lon']){
|
|
|
+ this.search()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ search() {
|
|
|
+ if(this.status == 'noMore') return
|
|
|
+ this.status = 'loading'
|
|
|
+ search({
|
|
|
+ ...this.query,
|
|
|
+ belongType:2,
|
|
|
+ isExceptGZU:true
|
|
|
+ }).then(res=>{
|
|
|
+ if(res.state == 'Success'){
|
|
|
+ this.loading = false
|
|
|
+ let list = []
|
|
|
+ let list1 = []
|
|
|
+ let data = res.content.records
|
|
|
+ data.map((item,index)=>{
|
|
|
+ if(index%2 == 0){
|
|
|
+ list.push(item)
|
|
|
+ }else{
|
|
|
+ list1.push(item)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.list = this.list.concat(list)
|
|
|
+ this.list1 = this.list1.concat(list1)
|
|
|
+ if(this.query.pageCurrent == res.content.pages){
|
|
|
+ this.status = 'noMore'
|
|
|
+ }else{
|
|
|
+ this.status = 'more'
|
|
|
+ this.query.pageCurrent++
|
|
|
+ }
|
|
|
+ if(!this.advList1.length){
|
|
|
+ this.getGoodsAdv().then(()=>{
|
|
|
+ this.advList1.map(item=>{
|
|
|
+ if(item.showSort<= (this.list.length + this.list1.length)){
|
|
|
+ if((item.showSort-1)%2 == 0){
|
|
|
+ this.list.splice(Math.ceil(item.showSort/2)-1,0,{isAdv:true,...item})
|
|
|
+ }else{
|
|
|
+ this.list1.splice(Math.ceil(item.showSort/2)-1,0,{isAdv:true,...item})
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ )
|
|
|
+ }else{
|
|
|
+ this.advList1.map(item=>{
|
|
|
+ if(item.showSort<= (this.list.length + this.list1.length)){
|
|
|
+ if((item.showSort-1)%2 == 0){
|
|
|
+ this.list.splice(Math.ceil(item.showSort/2)-1,0,{isAdv:true,...item})
|
|
|
+ }else{
|
|
|
+ this.list1.splice(Math.ceil(item.showSort/2)-1,0,{isAdv:true,...item})
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // 获取商品里面的广告
|
|
|
+ // getAdv({currentPage:1,pageSize:99,advertsType:2,status:1}).then(res1=>{
|
|
|
+ // if(res.state == 'Success'){
|
|
|
+ // res1.content.records.map(item=>{
|
|
|
+ // data.splice(item.showSort-1,0,{isAdv:true,...item})
|
|
|
+ // })
|
|
|
+ // console.log(data);
|
|
|
+ // data.map((item,index)=>{
|
|
|
+ // if(index%2){
|
|
|
+ // list.push(item)
|
|
|
+ // }else{
|
|
|
+ // list1.push(item)
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // this.list = this.list.concat(list)
|
|
|
+ // this.list1 = this.list1.concat(list1)
|
|
|
+ // // let total = this.list.length+this.list1.length
|
|
|
+ // // if(total>=res.content.total){
|
|
|
+ // if(this.query.pageCurrent == res.content.pages){
|
|
|
+ // this.status = 'noMore'
|
|
|
+ // }else{
|
|
|
+ // this.status = 'more'
|
|
|
+ // this.query.pageCurrent++
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 金刚区
|
|
|
+ getMenu(){
|
|
|
+ return new Promise((resolve,reject)=>{
|
|
|
+ getMenu({belongType: 1,currentPage:1,pageSize:10,status:2}).then(res=>{
|
|
|
+ if(res.state == 'Success'){
|
|
|
+ this.discountsList = res.content.records
|
|
|
+ resolve(1)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 广告位
|
|
|
+ getAdv(){
|
|
|
+ return new Promise((resolve,reject)=>{
|
|
|
+ getAdv({belongType:2,currentPage:1,pageSize:99,advertsType:1,status:1}).then(res=>{
|
|
|
+ if(res.state == 'Success'){
|
|
|
+ this.advList = res.content.records
|
|
|
+ // this.advList = res.content.records.filter((item,index)=>index<2)
|
|
|
+ // this.advList1 = res.content.records.filter((item,index)=>index>=2)
|
|
|
+ resolve(2)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取商品列表内广告位
|
|
|
+ getGoodsAdv(){
|
|
|
+ return new Promise((resolve,reject)=>{
|
|
|
+ getAdv({belongType:2,currentPage:1,pageSize:99,advertsType:2,status:1}).then(res=>{
|
|
|
+ if(res.state == 'Success'){
|
|
|
+ this.advList1 = res.content.records
|
|
|
+ resolve(2)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ },
|
|
|
+ onPageScroll(e) {
|
|
|
+ if(e.scrollTop >= 50){
|
|
|
+ this.background = true
|
|
|
+ }else{
|
|
|
+ this.background = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ if (uni.getStorageSync('token')&&!uni.getStorageSync('userInfo')) {
|
|
|
+ this.getUserDetail()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onHide() {},
|
|
|
+ onLoad(query){
|
|
|
+
|
|
|
+ uni.setStorageSync('inviteCode',decodeURIComponent(query.scene))
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.loading = true
|
|
|
+ Promise.all([this.getMenu(),this.getAdv(),this.getCity()]).then(res=>{
|
|
|
+ this.search()
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .home {
|
|
|
+ // padding-bottom:120rpx;
|
|
|
+ // background: linear-gradient(180deg, #FFFFFF 0%, #DCE8FF 100%);
|
|
|
+ background: #F9F9F9;
|
|
|
+
|
|
|
+ .card-title {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ width: 210rpx;
|
|
|
+ line-height: 64rpx;
|
|
|
+ background: linear-gradient(360deg, #3074F8 0%, #568FFF 100%);
|
|
|
+ border-radius: 0rpx 0rpx 24rpx 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-home {
|
|
|
+ // background: linear-gradient(178deg, #FFFFFF 0%, #F9F9F9 100%);
|
|
|
+ // background: #FFF;
|
|
|
+
|
|
|
+ .discount-list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ // padding: 30rpx 0;
|
|
|
+ margin: 0 24rpx 20rpx;
|
|
|
+ // background: #fff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ position: relative;
|
|
|
+ top: 20rpx;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ .discount-item {
|
|
|
+ width: 20%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ font-weight: 300;
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag {
|
|
|
+ position: absolute;
|
|
|
+ top: -20rpx;
|
|
|
+ left: 50%;
|
|
|
+ background: #FF0615;
|
|
|
+ box-shadow: inset 0rpx 6rpx 12rpx 2rpx rgba(255, 255, 255, 0.16);
|
|
|
+ border-radius: 12rpx 14rpx 14rpx 0rpx;
|
|
|
+ color: #fff;
|
|
|
+ white-space: nowrap;
|
|
|
+ font-size: 18rpx;
|
|
|
+ line-height: 24rpx;
|
|
|
+ height: 24rpx;
|
|
|
+ padding: 0 10rpx;
|
|
|
+ z-index: 1;
|
|
|
+ // width: fit-content;
|
|
|
+ background-size: 100% 34rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .desc {
|
|
|
+ color: #FF0817;
|
|
|
+ font-size: 16rpx;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-img {
|
|
|
+ width: 686rpx;
|
|
|
+ height: 166rpx;
|
|
|
+ margin: 24rpx 32rpx;
|
|
|
+ }
|
|
|
+ .swiper-box{
|
|
|
+ position: relative;
|
|
|
+ margin: 0 24rpx 20rpx;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ width: 702rpx;
|
|
|
+ height: 284rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ .progress{
|
|
|
+ position: absolute;
|
|
|
+ top: 38rpx;
|
|
|
+ right: 20rpx;
|
|
|
+ z-index: 2;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 16rpx;
|
|
|
+ background: rgba(255, 255, 255, 0.3);
|
|
|
+ padding: 2rpx 10rpx;
|
|
|
+ border-radius: 14rpx;
|
|
|
+ }
|
|
|
+ .swiper {
|
|
|
+ position: relative;
|
|
|
+ height: 100%;
|
|
|
+ .swiper-item {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .advertise-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 0 24rpx;
|
|
|
+ padding: 20rpx 0;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ border-radius: 16rpx 16rpx 0 0;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .zs-list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 24rpx;
|
|
|
+
|
|
|
+ .left {
|
|
|
+ .adv-swiper{
|
|
|
+ width: 340rpx;
|
|
|
+ height: 444rpx;
|
|
|
+ margin-bottom: 25rpx;
|
|
|
+ .adv-item{
|
|
|
+ width: 340rpx;
|
|
|
+ height: 444rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ad{
|
|
|
+ width: 340rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .store-item {
|
|
|
+ width: 340rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ // box-shadow: 0rpx 0rpx 24rpx 2rpx rgba(0, 0, 0, 0.08);
|
|
|
+ border-radius: 16rpx;
|
|
|
+ background: #fff;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 100%;
|
|
|
+ height: 300rpx;
|
|
|
+ border-radius: 16rpx 16rpx 0 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info{
|
|
|
+ flex: 1;
|
|
|
+ padding: 16rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ position: relative;
|
|
|
+ .title{
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ width: 100%;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .desc{
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #AAAAAA;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ /* 弹性伸缩盒子模型显示 */
|
|
|
+ display: -webkit-box;
|
|
|
+ /* 限制在一个块元素显示的文本的行数 */
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ /* 设置或检索伸缩盒对象的子元素的排列方式 */
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ margin-top: 12rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price-box{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 12rpx;
|
|
|
+ .left{
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ .unit{
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #FF4D3A;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .price{
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #FF4D3A;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right{
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #AAAAAA;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+</style>
|
