|
@@ -0,0 +1,1625 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <view class="detail-header">
|
|
|
+<!-- <image :src="shop.imgUrl"></image>-->
|
|
|
+ <view class="head">
|
|
|
+ <view class="info">
|
|
|
+ <view class="title">{{shop.storeName|truncate(10)}}</view>
|
|
|
+ <view class="address">{{shop.address.address|truncate(15)}}</view>
|
|
|
+ </view>
|
|
|
+ <image class="shopIcon" :src="shop.storePicUrl"></image>
|
|
|
+<!-- <view class="card">-->
|
|
|
+<!-- </view>-->
|
|
|
+ </view>
|
|
|
+ <van-tabs :active="active" @change="onChange" sticky>
|
|
|
+ <van-tab title="点 单">
|
|
|
+ <view class="container">
|
|
|
+ <scroll-view class="left-menu" scroll-y="true">
|
|
|
+ <block v-for="(type, index) in types" :key="index">
|
|
|
+ <view class="menu-item" :class="{ active: index === activeIndex }" @tap="scrollToElement('type_'+ (index+1))" >{{ type.productTypeName }}</view>
|
|
|
+ </block>
|
|
|
+ </scroll-view>
|
|
|
+ <scroll-view class="right-content" scroll-y="true" style="height: calc(100vh - 100rpx);" @scroll="onScroll" :scroll-into-view="scrollIntoView">
|
|
|
+
|
|
|
+ <block v-for="(type, index) in types" :key="index">
|
|
|
+ <view style="font-weight: bolder;font-size: 30rpx;margin-left: 10rpx;margin-top: 2px" :id='"type_"+ (index+1)'>{{type.productTypeName}}</view>
|
|
|
+ <block v-for="(product, idx) in getProjectsByType(index)" :key="idx">
|
|
|
+<!-- <van-card ></van-card>-->
|
|
|
+ <my-card :product="product" card-height="200rpx" card-width="210px"></my-card>
|
|
|
+ </block>
|
|
|
+ </block>
|
|
|
+ <view style="height: 60px; width: 100%;"></view>
|
|
|
+
|
|
|
+ <!-- <block v-for="(product, index) in products" :key="index">-->
|
|
|
+<!-- <view class="product-item">{{ product.name }}</view>-->
|
|
|
+<!-- </block>-->
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </van-tab>
|
|
|
+ <van-tab title="评 价">
|
|
|
+ <view class="review-container">
|
|
|
+<!-- <view class="header">-->
|
|
|
+<!-- <view class="title">商品评论</view>-->
|
|
|
+<!-- <view class="filter">-->
|
|
|
+<!-- <text>默认时间排序</text>-->
|
|
|
+<!-- </view>-->
|
|
|
+<!-- </view>-->
|
|
|
+ <view class="review-list">
|
|
|
+ <view class="review-item" v-for="(review, index) in sortedReviews" :key="index">
|
|
|
+ <view class="item-header">
|
|
|
+ <view class="user-info">
|
|
|
+ <image class="avatar" :src="review.avatar" mode="aspectFill"></image>
|
|
|
+ <text class="username">{{ review.username }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="rating">
|
|
|
+ <van-rate :value="review.rating" readonly />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="review-content">{{ review.content }}</view>
|
|
|
+ <view class="item-footer">
|
|
|
+ <text class="date">{{ formatDate(review.date) }}</text>
|
|
|
+ <view class="actions">
|
|
|
+ <van-icon name="like-o" @click="like(index)" :class="{ liked: review.liked }" />
|
|
|
+ <van-icon name="warning-o" @click="showActionSheet(index)" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="add-review-btn" @click="showReviewModal = true">我要评论</view>
|
|
|
+ <van-popup :show="showReviewModal" position="bottom" round :close-on-click-overlay="true" @close="closeReviewModal">
|
|
|
+ <view class="review-modal">
|
|
|
+ <view class="modal-header">发表评论</view>
|
|
|
+ <view class="modal-content">
|
|
|
+ <van-rate :value="newReview.rating" size="25" allow-half void-color="#eee" @change="onRate"/>
|
|
|
+ <van-field :value="contentValue" rows="4" autosize type="textarea" @change="onContentChange" maxlength="200" placeholder="请输入评论内容" show-word-limit />
|
|
|
+ </view>
|
|
|
+ <view class="modal-footer" >
|
|
|
+ <van-button type="primary" size="small" @click="submitReview">发表</van-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </van-popup>
|
|
|
+ </view>
|
|
|
+ <van-action-sheet :show="showSheet" :actions="actions" @select="onSelect" />
|
|
|
+ </view>
|
|
|
+ </van-tab>
|
|
|
+ <van-tab title="监 控">
|
|
|
+ <view v-if="active === 2" class="monitor-view">
|
|
|
+ <video class="monitor-video" :src="videoSrc" :autoplay="true" :loop="true" :muted="true" :show-play-btn="false" :controls="false" :objectFit="fill" ></video>
|
|
|
+ <view class="monitor-info">
|
|
|
+ <image class="monitor-img" src="../..//static/vedio/1.jpg" mode="aspectFit"></image>
|
|
|
+ <text class="monitor-text">请去PC端查看更多内容</text>
|
|
|
+ </view>
|
|
|
+ <video
|
|
|
+ id="myVideo"
|
|
|
+ :src="videoSrc"
|
|
|
+ :controls="controls"
|
|
|
+ :autoplay="autoplay"
|
|
|
+ style="width: 100%; height: 300px;"
|
|
|
+ ></video>
|
|
|
+
|
|
|
+<!-- <video></video>-->
|
|
|
+ </view>
|
|
|
+ </van-tab>
|
|
|
+ <!-- <van-tab title="标签 4">内容 4</van-tab>-->
|
|
|
+ </van-tabs>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view v-show="active === 0">
|
|
|
+ <view class="order">
|
|
|
+ <view class="order-footer">
|
|
|
+ <view class="discount-info" @click="showPop">
|
|
|
+ <div class="icon-container">
|
|
|
+ <van-icon name="balance-o" size="30"></van-icon>
|
|
|
+ <div class="badge" v-show="total()>0">{{ total() }}</div>
|
|
|
+ </div>^
|
|
|
+ </view>
|
|
|
+ <view class="order-action">
|
|
|
+ <view class="order-detail" @click="showOrderDetail">
|
|
|
+ <text>¥0</text>
|
|
|
+ <text>免配送费</text>
|
|
|
+ </view>
|
|
|
+ <view class="pay-button" @click="navigateToPayment">
|
|
|
+
|
|
|
+ <text v-show="checkedGoodsAmount()<0">¥{{ 20 }}起送</text>
|
|
|
+ <text v-show="checkedGoodsAmount()>=
|
|
|
+
|
|
|
+
|
|
|
+ 0">¥{{ checkedGoodsAmount()}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+<!-- <view class="shop-container">-->
|
|
|
+<!-- <van-tabs :active="active " @change="onChange" swipeable sticky :ellipsis="false">-->
|
|
|
+<!-- <van-tab title="全部饮品" name='all' sticky>-->
|
|
|
+
|
|
|
+<!-- </van-tab>-->
|
|
|
+<!-- <van-tab v-for="(item,index) in types " :key="index" :title="item.name" :name='item.id' >-->
|
|
|
+<!--<!– <my-menu-index :projects='projects'></my-menu-index>–>-->
|
|
|
+<!-- </van-tab>-->
|
|
|
+<!-- </van-tabs>-->
|
|
|
+<!-- </view>-->
|
|
|
+ </view>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+import {mapState,mapMutations,mapGetters} from'vuex'
|
|
|
+export default {
|
|
|
+
|
|
|
+ onLoad(args) {
|
|
|
+ console.log(args.shopID, 'shopdetail')
|
|
|
+ this.shop=this.getShopById()(args.shopID)
|
|
|
+ console.log(args,"啊啊啊")
|
|
|
+ console.log(this.shop.address.address)
|
|
|
+ this.distance=this.getDistance()(10)
|
|
|
+ this.products=this.shop.products
|
|
|
+ let types=this.shop.productTypes
|
|
|
+ this.types=types
|
|
|
+ // for (let i=0;i<types.length;i++){
|
|
|
+ // this.types.push( { id: i+1, name: types[i] } )
|
|
|
+ // }
|
|
|
+ // console.log(this.getDistance()(10))
|
|
|
+ // console.log(this.shop,"是吗")
|
|
|
+ // console.log(this.projects)
|
|
|
+ console.log(this.types)
|
|
|
+ console.log(this.products)
|
|
|
+ // console.log(this.getShopById(args.shopID)())
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ videoSrc: '../../static/vedio/1.mp4',
|
|
|
+ showReviewModal: false,
|
|
|
+ newReview: {
|
|
|
+ avatar: this.getAvatarUrl(), // 默认头像
|
|
|
+ username: this.getUserName(),
|
|
|
+ rating: 5,
|
|
|
+ content: '',
|
|
|
+ date: new Date().toISOString().slice(0, 10),
|
|
|
+ liked: false
|
|
|
+ },
|
|
|
+ contentValue: '',
|
|
|
+
|
|
|
+ reviews: [
|
|
|
+ {
|
|
|
+ avatar: '../../static/avator/1.jpg',
|
|
|
+ username: '张三',
|
|
|
+ rating: 5,
|
|
|
+ content: '这家水果店的苹果真是太好吃了,甜度刚刚好,口感也很脆甜。',
|
|
|
+ date: '2024-05-01',
|
|
|
+ liked: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ avatar: '../../static/avator/2.jpg',
|
|
|
+ username: '李斯',
|
|
|
+ rating: 4,
|
|
|
+ content: '香蕉的品质一般,个头较小,但口感还可以。',
|
|
|
+ date: '2024-04-28',
|
|
|
+ liked: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ avatar: '../../static/avator/3.jpg',
|
|
|
+ username: '辛雨东',
|
|
|
+ rating: 3,
|
|
|
+ content: '橘子的甜度不够,希望下次能够更甜一些。',
|
|
|
+ date: '2024-04-25',
|
|
|
+ liked: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ avatar: '../../static/avator/4.jpg',
|
|
|
+ username: '默认名称200151024',
|
|
|
+ rating: 5,
|
|
|
+ content: '这家店的樱桃真是太棒了,个头大颗颗饱满,甜度也刚刚好,非常满意!',
|
|
|
+ date: '2024-04-20',
|
|
|
+ liked: false
|
|
|
+ },{
|
|
|
+ avatar: '../../static/avator/5.jpg',
|
|
|
+ username: '李晓',
|
|
|
+ rating: 4,
|
|
|
+ content: '草莓新鲜可口,个头也很大,值得推荐。',
|
|
|
+ date: '2024-04-20',
|
|
|
+ liked: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ avatar: '../../static/avator/6.jpg',
|
|
|
+ username: '钱齐星',
|
|
|
+ rating: 5,
|
|
|
+ content: '西瓜非常甜脆,吃起来非常解渴,很满意。',
|
|
|
+ date: '2024-04-20',
|
|
|
+ liked: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ avatar: '../../static/avator/7.jpg',
|
|
|
+ username: '刘王雪',
|
|
|
+ rating: 3,
|
|
|
+ content: '柚子的味道不错,但个头偏小,希望可以选到更大的。',
|
|
|
+ date: '2024-04-20',
|
|
|
+ liked: false
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ showSheet: false,
|
|
|
+ actions: [{ name: '我要举报' }, { name: '取消' }],
|
|
|
+ currentIndex: -1,
|
|
|
+ shop: {},
|
|
|
+ projects: [],
|
|
|
+ distance:0,
|
|
|
+ active: 0,
|
|
|
+ //
|
|
|
+ types: [
|
|
|
+ { id: '1', productName: '类型1' },
|
|
|
+ { id: '2', productName: '类型2' },
|
|
|
+ { id: '3', productName: '类型3' },
|
|
|
+ // 其他类型...
|
|
|
+ ],
|
|
|
+ products: [
|
|
|
+ { type: '1', name: '商品1' },
|
|
|
+ { type: '1', name: '商品1' },
|
|
|
+ { type: '1', name: '商品1' },
|
|
|
+ { type: '1', name: '商品1' },
|
|
|
+ { type: '1', name: '商品1' },
|
|
|
+ { type: '1', name: '商品1' },
|
|
|
+ { type: '1', name: '商品1' },
|
|
|
+ { type: '1', name: '商品1' },
|
|
|
+ { type: '1', name: '商品2' },
|
|
|
+ { type: '1', name: '商品2' },
|
|
|
+ { type: '1', name: '商品2' },
|
|
|
+ { type: '1', name: '商品2' },
|
|
|
+ { type: '1', name: '商品2' },
|
|
|
+ { type: '2', name: '商品3' },
|
|
|
+ { type: '2', name: '商品3' },
|
|
|
+ { type: '2', name: '商品3' },
|
|
|
+ { type: '2', name: '商品3' },
|
|
|
+ { type: '2', name: '商品4' },
|
|
|
+ { type: '2', name: '商品4' },
|
|
|
+ { type: '2', name: '商品4' },
|
|
|
+ { type: '2', name: '商品4' },
|
|
|
+ { type: '3', name: '商品5' },
|
|
|
+ // 其他商品...
|
|
|
+ ],
|
|
|
+ scrollIntoView: ''
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+
|
|
|
+ sortedReviews() {
|
|
|
+ return this.reviews.sort((a, b) => new Date(b.date) - new Date(a.date))
|
|
|
+ },
|
|
|
+ newReviewContent() {
|
|
|
+ return this.newReview.content.toString();
|
|
|
+ },
|
|
|
+ }, watch: {
|
|
|
+ newReviewContent(newVal) {
|
|
|
+ this.contentValue = newVal;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapGetters('m_shop',['getTypeById','getProductById']),
|
|
|
+ ...mapGetters('m_user',['getUserName','getAvatarUrl']),
|
|
|
+ onContentChange(event) {
|
|
|
+ console.log(event)
|
|
|
+ this.newReview.content = event.detail;
|
|
|
+ },
|
|
|
+ onRate(event) {
|
|
|
+ console.log(event)
|
|
|
+ this.newReview.rating = event.detail;
|
|
|
+ },
|
|
|
+ scrollToElement: function(target) {
|
|
|
+ console.log('滚不滚')
|
|
|
+ this.scrollIntoView = target; // 滚动到指定元素
|
|
|
+ },submitReview() {
|
|
|
+ console.log(this.newReview)
|
|
|
+ // return
|
|
|
+ if (this.newReview.content.trim() !== '') {
|
|
|
+ console.log('来了')
|
|
|
+ this.reviews.unshift(this.newReview);
|
|
|
+ this.newReview = {
|
|
|
+ avatar: this.getAvatarUrl(),
|
|
|
+ username: this.getUserName(),
|
|
|
+ rating: 5,
|
|
|
+ content: '',
|
|
|
+ date: new Date().toISOString().slice(0, 10),
|
|
|
+ liked: false
|
|
|
+ };
|
|
|
+ this.showReviewModal = false;
|
|
|
+ }
|
|
|
+ console.log(this.reviews,"reviews")
|
|
|
+ },
|
|
|
+ closeReviewModal() {
|
|
|
+ this.showReviewModal = false;
|
|
|
+ this.newReview.content = '';
|
|
|
+ },
|
|
|
+ showPop() {
|
|
|
+
|
|
|
+ },
|
|
|
+ ...mapGetters('m_shop', {'getShopById':'getShopById', 'getDistance':'getDistance'}),
|
|
|
+ ...mapGetters('m_proj',{'getProjects':'getProjects','getTypes':'getTypes'}),
|
|
|
+ ...mapGetters('m_cart', {'total':'total','checkedGoodsAmount':'checkedGoodsAmount'}),//total:计算数量,checkedGoodsAmount:计算总价
|
|
|
+ //
|
|
|
+ getProjectsByType(idx){
|
|
|
+ // console.log(idx)
|
|
|
+ // console.log(this.products)
|
|
|
+ let mp={
|
|
|
+ 0:[1,2,4,5],
|
|
|
+ 1:[3,2,4,6],
|
|
|
+ 2:[8,9,7,6],
|
|
|
+ 3:[10,11,12,13],
|
|
|
+ 4:[14,15,16,10],
|
|
|
+ 5:[10,3,13,2],
|
|
|
+ }
|
|
|
+ let ret=[]
|
|
|
+ if (!mp[idx]) return
|
|
|
+ for (let i=0;i<mp[idx].length;i++){
|
|
|
+ ret.push(this.products[mp[idx][i]-1])
|
|
|
+ }
|
|
|
+ console.log(ret)
|
|
|
+ return ret
|
|
|
+ },
|
|
|
+ onChange(event) {
|
|
|
+ console.log(event)
|
|
|
+ console.log(this.active)
|
|
|
+
|
|
|
+ this.active = event.detail.index;
|
|
|
+ console.log(this.active)
|
|
|
+ },
|
|
|
+ scrollToView(index) {
|
|
|
+ const typeId = this.types[index].id;
|
|
|
+ this.activeIndex = index;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ uni.pageScrollTo({
|
|
|
+ selector: `#type_${typeId}`,
|
|
|
+ duration: 300
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onScroll(event) {
|
|
|
+ const scrollTop = event.detail.scrollTop;
|
|
|
+ const types = this.types;
|
|
|
+ let currentTypeIndex = 0;
|
|
|
+
|
|
|
+ for (let i = 0; i < types.length; i++) {
|
|
|
+
|
|
|
+ const typeId = types[i].id;
|
|
|
+ const query = uni.createSelectorQuery();
|
|
|
+ query.select('#type_' + typeId).boundingClientRect();
|
|
|
+ query.exec((res) => {
|
|
|
+ if (res && res[0] && res[0].top <= 0) {
|
|
|
+ currentTypeIndex = i;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.activeIndex = currentTypeIndex;
|
|
|
+ },
|
|
|
+ showOrderDetail() {
|
|
|
+ // 显示订单详情界面的逻辑
|
|
|
+ },
|
|
|
+ pay() {
|
|
|
+ // 付款逻辑
|
|
|
+
|
|
|
+ },
|
|
|
+ formatDate(dateStr) {
|
|
|
+ const date = new Date(dateStr)
|
|
|
+ const year = date.getFullYear()
|
|
|
+ const month = String(date.getMonth() + 1).padStart(2, '0')
|
|
|
+ const day = String(date.getDate()).padStart(2, '0')
|
|
|
+ return `${year}-${month}-${day}`
|
|
|
+ },
|
|
|
+ like(index) {
|
|
|
+ this.reviews[index].liked = !this.reviews[index].liked
|
|
|
+ },
|
|
|
+ showActionSheet(index) {
|
|
|
+ this.currentIndex = index
|
|
|
+ this.showSheet = true
|
|
|
+ },
|
|
|
+ onSelect(event) {
|
|
|
+ if (event.detail.name === '我要举报') {
|
|
|
+ // 执行举报操作
|
|
|
+
|
|
|
+ console.log(`举报第${this.currentIndex + 1}条评论`)
|
|
|
+ uni.showToast({
|
|
|
+ title: '举报成功',
|
|
|
+ icon: 'success',
|
|
|
+ duration: 3000
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.showSheet = false
|
|
|
+ },
|
|
|
+ navigateToPayment() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/subpkg/payment/payment?shopTitle=' + this.shop.storeName+'&shopId=' + this.shop.id
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ formatPrice(price) {
|
|
|
+ return '¥' + price.toFixed(2);
|
|
|
+ },
|
|
|
+ // 字数过长用...限制
|
|
|
+ truncate(value, length = 10) {
|
|
|
+ if (!value) return '';
|
|
|
+ if (value.length > length) {
|
|
|
+ return value.slice(0, length) + '...';
|
|
|
+ }
|
|
|
+ return value;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.icon-container {
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+}
|
|
|
+
|
|
|
+.badge {
|
|
|
+ position: absolute;
|
|
|
+ top: -5px;
|
|
|
+ right: -5px;
|
|
|
+ background-color: red;
|
|
|
+ color: white;
|
|
|
+ border-radius: 50%;
|
|
|
+ padding: 2px 6px;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+page {
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ //overflow: hidden;
|
|
|
+}
|
|
|
+.head{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ .info{
|
|
|
+ //上下布局
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ .title{
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 40rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+ .address{
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #999;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ image{
|
|
|
+ width: 130rpx;
|
|
|
+ height: 130rpx;
|
|
|
+ border-radius: 2%;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 130rpx;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ z-index: 900;
|
|
|
+ background-color: #fff;
|
|
|
+ box-shadow: 0 0 10rpx rgba(0, 0, 0, .05);
|
|
|
+
|
|
|
+ .left {
|
|
|
+ flex: 0 0 60%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ width: 90%;
|
|
|
+ color: #343434;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .address {
|
|
|
+ width: 90%;
|
|
|
+ color: #999;
|
|
|
+ font-size: 26rpx;
|
|
|
+ padding-top: 6rpx;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ flex: 0 0 35%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-end;
|
|
|
+
|
|
|
+ .type {
|
|
|
+ display: flex;
|
|
|
+ width: 180rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ border-radius: 100rpx;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 26rpx;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ background-color: #343434;
|
|
|
+ color: #fff;
|
|
|
+ width: 86rpx;
|
|
|
+ border-radius: 100rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 54rpx;
|
|
|
+ transition: all .3s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ width: 86rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .more {
|
|
|
+ color: #999;
|
|
|
+ font-size: 24rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-top: 6rpx;
|
|
|
+
|
|
|
+ icon {
|
|
|
+ padding-left: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.goodsBox {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .left {
|
|
|
+ flex: 0 0 28%;
|
|
|
+
|
|
|
+ .menuList {
|
|
|
+ overflow-y: scroll;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+
|
|
|
+ .menu {
|
|
|
+ color: #999999;
|
|
|
+ font-size: 26rpx;
|
|
|
+ padding: 30rpx 10rpx;
|
|
|
+ text-align: center;
|
|
|
+ background-color: transparent;
|
|
|
+ border-left: 6rpx solid transparent;
|
|
|
+ transition: all 0.6s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .active {
|
|
|
+ font-weight: bold;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ flex: 0 0 72%;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+
|
|
|
+ .swiperBpx {
|
|
|
+ width: 95%;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding-top: 14rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ swiper {
|
|
|
+ height: 220rpx;
|
|
|
+
|
|
|
+ .swiper-item {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 56rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiperDots {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 12rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ height: 10rpx;
|
|
|
+
|
|
|
+ .dot {
|
|
|
+ margin: 0 5rpx;
|
|
|
+ width: 25rpx;
|
|
|
+ height: 4rpx;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ transition: all 0.6s;
|
|
|
+ opacity: 0.5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .active {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .goodsList{
|
|
|
+ width: 95%;
|
|
|
+ margin: 0 auto;
|
|
|
+ .gheader{
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 26rpx;
|
|
|
+ display: flex;
|
|
|
+ height: 100rpx;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .goods{
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ .left{
|
|
|
+ flex: 0 0 30%;
|
|
|
+ display: flex;
|
|
|
+ .image{
|
|
|
+ width: 140rpx;
|
|
|
+ height: 140rpx;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ .icon{
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+ .none{
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: rgba(255,255,255,.6);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right{
|
|
|
+ flex: 0 0 70%;
|
|
|
+ .title{
|
|
|
+ color:#343434;
|
|
|
+ font-size:26rpx;
|
|
|
+ font-weight:bold;
|
|
|
+ }
|
|
|
+ .intro{
|
|
|
+ color:#999;
|
|
|
+ font-size:24rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ padding-top: 4rpx;
|
|
|
+ }
|
|
|
+ .box{
|
|
|
+ display:flex;
|
|
|
+ align-items:center;
|
|
|
+ padding-top: 10rpx;
|
|
|
+ position: relative;
|
|
|
+ .price{
|
|
|
+ color:#343434;
|
|
|
+ font-size:28rpx;
|
|
|
+ font-weight:bold;
|
|
|
+ flex: 0 0 50%
|
|
|
+ }
|
|
|
+ .button{
|
|
|
+ flex: 0 0 50%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ .text{
|
|
|
+ background-color: #d3aa79;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 24rpx;
|
|
|
+ padding: 4rpx 16rpx;
|
|
|
+ border-radius: 100rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.footer{
|
|
|
+ position:fixed;
|
|
|
+ bottom: 140rpx;
|
|
|
+ width:92%;
|
|
|
+ left:0;
|
|
|
+ right: 0;
|
|
|
+ height:80rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ border-radius: 100rpx;
|
|
|
+ background-color:#fff;
|
|
|
+ display:flex;
|
|
|
+ align-items:center;
|
|
|
+ z-index:899;
|
|
|
+ box-shadow: 0 0 20rpx rgba(0,0,0,.05);
|
|
|
+ .label{
|
|
|
+ color: #fff;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .left{
|
|
|
+ flex: 0 0 70%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ height: 100%;
|
|
|
+ .cart{
|
|
|
+ position: absolute;
|
|
|
+ width: 180rpx;
|
|
|
+ height: 100%;
|
|
|
+ left: 0;
|
|
|
+ color: #343434;
|
|
|
+ font-size: 26rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ icon{
|
|
|
+ padding-right: 8rpx;
|
|
|
+ }
|
|
|
+ text{
|
|
|
+ position: absolute;
|
|
|
+ top: -8rpx;
|
|
|
+ right: -12rpx;
|
|
|
+ background-color: #d3aa79;
|
|
|
+ border-radius: 100%;
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .price{
|
|
|
+ color:#343434;
|
|
|
+ font-size:30rpx;
|
|
|
+ padding-right: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right{
|
|
|
+ flex: 0 0 30%;
|
|
|
+ height: 100%;
|
|
|
+ border-top-right-radius: 100rpx;
|
|
|
+ border-bottom-right-radius: 100rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ .button{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ color: #FFFFFF;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background-color:#d3aa79;
|
|
|
+ }
|
|
|
+ .none{
|
|
|
+ background-color:#bbbbbb;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.footerX{
|
|
|
+ bottom: 166rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.showPopBox{
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: rgba(0,0,0,.5);
|
|
|
+ z-index: 970;
|
|
|
+ transition: all 0.3s;
|
|
|
+ .bg{
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 971;
|
|
|
+ }
|
|
|
+ .showContent{
|
|
|
+ position: absolute;
|
|
|
+ z-index: 972;
|
|
|
+ width: 100%;
|
|
|
+ max-height: 600rpx;
|
|
|
+ bottom: 120rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ left: 0;
|
|
|
+ .sheade{
|
|
|
+ width: 100%;
|
|
|
+ background-color: #f2f2f2;
|
|
|
+ font-size: 24rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .left{
|
|
|
+ flex: 0 0 50%;
|
|
|
+ .text{
|
|
|
+ color: #999;
|
|
|
+ padding-left: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right{
|
|
|
+ flex: 0 0 50%;
|
|
|
+ .text{
|
|
|
+ color: #999;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ padding-right: 20rpx;
|
|
|
+ icon{
|
|
|
+ padding-right: 6rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sconten{
|
|
|
+ max-height: 544rpx;
|
|
|
+ overflow-y: scroll;
|
|
|
+ .goods{
|
|
|
+ width: 95%;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1px dashed #f5f5f5;
|
|
|
+ height: 110rpx;
|
|
|
+ .left{
|
|
|
+ flex: 0 0 60%;
|
|
|
+ .title{
|
|
|
+ color:#343434;
|
|
|
+ }
|
|
|
+ .label{
|
|
|
+ color:#999;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right{
|
|
|
+ flex: 0 0 40%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ .price{
|
|
|
+ flex: 0 0 40%;
|
|
|
+ color:#343434;
|
|
|
+ }
|
|
|
+ .buy{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex: 0 0 60%;
|
|
|
+ input{
|
|
|
+ text-align: center;
|
|
|
+ color:#343434;
|
|
|
+ }
|
|
|
+ text{
|
|
|
+ color: #999;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .infoContent{
|
|
|
+ position: absolute;
|
|
|
+ z-index: 972;
|
|
|
+ width: 100%;
|
|
|
+ max-height: 55vh;
|
|
|
+ top: 130rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ left: 0;
|
|
|
+ overflow-y: scroll;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ padding-top: 10rpx;
|
|
|
+ .label{
|
|
|
+ width: 95%;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 12rpx 0;
|
|
|
+ .title{
|
|
|
+ color: #343434;
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+ .text{
|
|
|
+ color: #999;
|
|
|
+ font-size: 24rpx;
|
|
|
+ padding-top: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .images{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding-top: 6rpx;
|
|
|
+ .image{
|
|
|
+ width: 200rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ border: 2rpx solid #f5f5f5;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ position: relative;
|
|
|
+ .text{
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ background-color: rgba(255,255,255,.6);
|
|
|
+ height: 50rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #666;
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .goodsConten{
|
|
|
+ position: absolute;
|
|
|
+ z-index: 972;
|
|
|
+ width: 80%;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ margin-top: -5vh;
|
|
|
+ box-shadow: 0 10rpx 20rpx rgba(0,0,0,.06);
|
|
|
+ .image{
|
|
|
+ width: 100%;
|
|
|
+ height: 320rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ position: relative;
|
|
|
+ icon{
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .title{
|
|
|
+ width: 90%;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding-top: 10rpx;
|
|
|
+ padding-bottom: 10rpx;
|
|
|
+ color: #343434;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .moreBox{
|
|
|
+ width: 90%;
|
|
|
+ margin: 0 auto;
|
|
|
+ .label{
|
|
|
+ padding-bottom: 10rpx;
|
|
|
+ .stitle{
|
|
|
+ padding-bottom: 10rpx;
|
|
|
+ text{
|
|
|
+ color: #999;
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .specBox{
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .spec{
|
|
|
+ border: 1px solid #eee;
|
|
|
+ padding: 8rpx 20rpx;
|
|
|
+ margin-right: 12rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ .active{
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .more{
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ .labtit{
|
|
|
+ color: #999;
|
|
|
+ font-size: 26rpx;
|
|
|
+ padding-top: 10rpx;
|
|
|
+ }
|
|
|
+ .intro{
|
|
|
+ color: #999;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .gfooter{
|
|
|
+ border-top: 1px solid #f5f5f5;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ .price{
|
|
|
+ width: 90%;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: flex;
|
|
|
+ padding: 10rpx 0;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ .left{
|
|
|
+ flex: 0 0 65%;
|
|
|
+ .text{
|
|
|
+ color: #d3aa79;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ text{
|
|
|
+ text-decoration: line-through;
|
|
|
+ color: #999;
|
|
|
+ font-size: 26rpx;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ font-weight: normal;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .label{
|
|
|
+ color: #999;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right{
|
|
|
+ flex: 0 0 35%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ .buy{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ input{
|
|
|
+ text-align: center;
|
|
|
+ color:#343434;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .button{
|
|
|
+ width: 90%;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ background-color: #d3aa79;
|
|
|
+ color: #fff;
|
|
|
+ height: 66rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border-radius: 100rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+ .none{
|
|
|
+ background-color: #cccccc;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.couponsIcon{
|
|
|
+ position: fixed;
|
|
|
+ bottom: 230rpx;
|
|
|
+ width: 100rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ left: 60rpx;
|
|
|
+}
|
|
|
+.showCoupons{
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ background-color: rgba(0,0,0,.5);
|
|
|
+ z-index: 999;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ .bg{
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 1000;
|
|
|
+ }
|
|
|
+ .coupons{
|
|
|
+ position: absolute;
|
|
|
+ width: 600rpx;
|
|
|
+ height: 568rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ z-index: 1001;
|
|
|
+ transition: all 0.6s;
|
|
|
+ margin-top: -10%;
|
|
|
+ .headerTitle{
|
|
|
+ position: absolute;
|
|
|
+ top: 76rpx;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ color: #af8859;
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+ .listBox{
|
|
|
+ width: 72%;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 50rpx;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ top: 100rpx;
|
|
|
+ height: 260rpx;
|
|
|
+ border-bottom-left-radius: 20%;
|
|
|
+ border-bottom-right-radius: 20%;
|
|
|
+ overflow: hidden;
|
|
|
+ .list{
|
|
|
+ display:flex;
|
|
|
+ align-items:center;
|
|
|
+ width:99%;
|
|
|
+ height:120rpx;
|
|
|
+ justify-content:center;
|
|
|
+ border-radius:4rpx;
|
|
|
+ position: relative;
|
|
|
+ overflow:hidden;
|
|
|
+ padding: 2rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ .left{
|
|
|
+ width:35%;
|
|
|
+ display:flex;
|
|
|
+ flex-direction:column;
|
|
|
+ align-items:center;
|
|
|
+ justify-content:center;
|
|
|
+ height:120rpx;
|
|
|
+ border:2rpx solid #f5f5f5;
|
|
|
+ border-right:none;
|
|
|
+ .price{
|
|
|
+ color:#d3aa79;
|
|
|
+ font-size:42rpx;
|
|
|
+ font-weight:500;
|
|
|
+ display:flex;
|
|
|
+ text{
|
|
|
+ font-size:26rpx;
|
|
|
+ padding-top:6rpx;
|
|
|
+ padding-right:2rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .text{
|
|
|
+ color:#999;
|
|
|
+ font-size:22rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .active{
|
|
|
+ position:absolute;
|
|
|
+ width:2rpx;
|
|
|
+ height:80rpx;
|
|
|
+ left:34%;
|
|
|
+ border-right:2rpx dashed #eee;
|
|
|
+ display:flex;
|
|
|
+ align-items:center;
|
|
|
+ justify-content:center;
|
|
|
+ .top{
|
|
|
+ width:20rpx;
|
|
|
+ height:20rpx;
|
|
|
+ background-color:#fff;
|
|
|
+ border-radius:100%;
|
|
|
+ position:absolute;
|
|
|
+ top:-30rpx;
|
|
|
+ border:2rpx solid #f5f5f5;
|
|
|
+ }
|
|
|
+ .buttom{
|
|
|
+ width:20rpx;
|
|
|
+ height:20rpx;
|
|
|
+ background-color:#fff;
|
|
|
+ border-radius:100%;
|
|
|
+ position:absolute;
|
|
|
+ bottom:-30rpx;
|
|
|
+ border:2rpx solid #f5f5f5;;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right{
|
|
|
+ width:65%;
|
|
|
+ height:120rpx;
|
|
|
+ display:flex;
|
|
|
+ flex-direction:column;
|
|
|
+ justify-content:center;
|
|
|
+ border:2rpx solid #f5f5f5;
|
|
|
+ border-left:none;
|
|
|
+ .title{
|
|
|
+ color:#343434;
|
|
|
+ font-weight:500;
|
|
|
+ font-size:26rpx;
|
|
|
+ width:90%;
|
|
|
+ margin:0 auto;
|
|
|
+ overflow:hidden;
|
|
|
+ text-overflow:ellipsis;
|
|
|
+ white-space:nowrap;
|
|
|
+ }
|
|
|
+ .times{
|
|
|
+ color:#999;
|
|
|
+ font-size:24rpx;
|
|
|
+ padding-top:10rpx;
|
|
|
+ width:90%;
|
|
|
+ margin:0 auto;
|
|
|
+ overflow:hidden;
|
|
|
+ text-overflow:ellipsis;
|
|
|
+ white-space:nowrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .buttonBox{
|
|
|
+ width: 80%;
|
|
|
+ margin: 0 auto;
|
|
|
+ height: 70rpx;
|
|
|
+ display:flex;
|
|
|
+ align-items:flex-end;
|
|
|
+ justify-content:center;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 36rpx;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ .button{
|
|
|
+ background-color:#af8859;
|
|
|
+ width:100%;
|
|
|
+ height:100%;
|
|
|
+ display:flex;
|
|
|
+ align-items:center;
|
|
|
+ justify-content:center;
|
|
|
+ color:#fff;
|
|
|
+ border-radius:4rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .close{
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 100rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 100rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.showShare{
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ background-color: rgba(0,0,0,.5);
|
|
|
+ z-index: 999;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ .bg{
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 1000;
|
|
|
+ }
|
|
|
+ .share{
|
|
|
+ position: absolute;
|
|
|
+ width: 500rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ z-index: 1001;
|
|
|
+ transition: all 0.6s;
|
|
|
+ .title{
|
|
|
+ font-weight: bold;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 38rpx 0 30rpx;
|
|
|
+ }
|
|
|
+ .box{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding-bottom: 38rpx;
|
|
|
+ .label{
|
|
|
+ flex: 0 0 45%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ position: relative;
|
|
|
+ .text{
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ button{
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .haibao{
|
|
|
+ width: 90%;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ image{
|
|
|
+ width: 400rpx;
|
|
|
+ height: 600rpx;
|
|
|
+ border: 1px solid #f5f5f5;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ }
|
|
|
+ .save{
|
|
|
+ color: #FFFFFF;
|
|
|
+ width: 280rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ border-radius: 100rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin: 30rpx 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+.container {
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.left-menu {
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+.right-content {
|
|
|
+ flex: 2;
|
|
|
+}
|
|
|
+.menu-item {
|
|
|
+ padding: 10px;
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+.menu-item.active {
|
|
|
+ color: red; /* 激活状态的颜色 */
|
|
|
+}
|
|
|
+.product-item {
|
|
|
+ padding: 10px;
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.order-footer {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ background-color: #333;
|
|
|
+ color: #fff;
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.discount-info {
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.order-action {
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+
|
|
|
+.order-detail {
|
|
|
+ background-color: #666;
|
|
|
+ padding: 15px 20px; /* 增加了padding */
|
|
|
+ border-radius: 20px 0 0 20px; /* 增加了圆角半径 */
|
|
|
+ font-size: 16px; /* 增加了字体大小 */
|
|
|
+}
|
|
|
+
|
|
|
+.pay-button {
|
|
|
+ background-color: #ff6700;
|
|
|
+ padding: 15px 20px; /* 增加了padding */
|
|
|
+ border-radius: 0 20px 20px 0; /* 增加了圆角半径 */
|
|
|
+ font-size: 18px; /* 增加了字体大小 */
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+.review-container {
|
|
|
+ padding: 20rpx;
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ .add-review-btn {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ background-color: #07c160;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 28rpx;
|
|
|
+ text-align: center;
|
|
|
+ padding: 20rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .review-modal {
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 30rpx;
|
|
|
+
|
|
|
+ .modal-header {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal-content {
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal-footer {
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+}
|
|
|
+}
|
|
|
+
|
|
|
+.header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.review-list {
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
|
|
|
+ padding: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.review-item {
|
|
|
+ padding: 20rpx 0;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+
|
|
|
+ .user-info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .avatar {
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .username {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .rating {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #ffd21e;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .review-content {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666;
|
|
|
+ line-height: 1.5;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .date {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .actions {
|
|
|
+ .van-icon-like-o,
|
|
|
+ .van-icon-warning-o {
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .liked {
|
|
|
+ color: #ff6600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.monitor-view {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 500rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.monitor-video {
|
|
|
+ width: 100%;
|
|
|
+ height: 300rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.monitor-info {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.monitor-img {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 200rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.monitor-text {
|
|
|
+ margin-top: 30rpx;
|
|
|
+ font-size: 50rpx;
|
|
|
+ color: #666;
|
|
|
+}
|
|
|
+</style>
|