781 lines
28 KiB
Vue
781 lines
28 KiB
Vue
|
<template>
|
|||
|
|
<div class="">
|
|||
|
|
<!-- 顶部 -->
|
|||
|
|
<div class="bg-white">
|
|||
|
|
<div class="flex flex-1 row-center col-center" style="width: 100%; height: 150px;" v-if="shopInfo.banner">
|
|||
|
|
<el-image :src="shopInfo.banner" fit="cover" style="height: 100%; width: 100%; max-width: 1920px;">
|
|||
|
|
</el-image>
|
|||
|
|
</div>
|
|||
|
|
<div class="wrapper1180 flex flex-1 col-center row-between" style="height: 40px">
|
|||
|
|
<div class="h-item flex row-center" :class="xuanIndex =='' ? 'h-item-x':''" @click="changeXuan('')">
|
|||
|
|
店铺首页
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="flex row-left flex-1">
|
|||
|
|
<div class="h-item flex row-center" :class="xuanIndex =='all' ? 'h-item-x':''"
|
|||
|
|
@click="changeXuan('all')">
|
|||
|
|
全部商品
|
|||
|
|
</div>
|
|||
|
|
<!-- <div class="" v-for="(item, index) in goodsClassList" :key="index">
|
|||
|
|
<div class="h-item flex row-center" :class="xuanIndex == item.id ? 'h-item-x':''"
|
|||
|
|
@click="changeXuan(item.id)">
|
|||
|
|
{{item.name}}
|
|||
|
|
</div>
|
|||
|
|
</div> -->
|
|||
|
|
<!-- 商品分类 -->
|
|||
|
|
<swiper class="swiper flex row-left" ref="mySwiper" :options="swiperOptions"
|
|||
|
|
style="width: 672px; display: flex; justify-content: flex-start;margin: 0;">
|
|||
|
|
<swiper-slide class="swiper-item flex row-left" v-for="(itemd, indexd) in goodsClassListGroup"
|
|||
|
|
:key="indexd">
|
|||
|
|
<div class="flex">
|
|||
|
|
<div class="" v-for="(item, index) in itemd" :key="index">
|
|||
|
|
<div class="h-item flex row-center" :class="xuanIndex == item.id ? 'h-item-x':''"
|
|||
|
|
@click="changeXuan(item.id)">
|
|||
|
|
{{item.name}}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</swiper-slide>
|
|||
|
|
</swiper>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="search">
|
|||
|
|
<el-input v-model="keyword" placeholder="店铺搜索" @change="search" size="mini"></el-input>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="shop-details flex col-top wrapper1180 flex-1">
|
|||
|
|
<!-- left -->
|
|||
|
|
<div class="left">
|
|||
|
|
<!-- 店铺介绍 -->
|
|||
|
|
<div class="shop bg-white">
|
|||
|
|
<div class="shop-logo flex-col col-center">
|
|||
|
|
<el-image class="logo-img" :src="shopInfo.logo"></el-image>
|
|||
|
|
<div class="m-t-10">
|
|||
|
|
<el-tag size="mini" v-if="shopInfo.type == 1">自营</el-tag>
|
|||
|
|
<span class="weight-500">{{ shopInfo.name }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="xs muted m-t-10 line-5">
|
|||
|
|
{{shopInfo.intro}}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex m-t-30">
|
|||
|
|
<div class="flex-1 text-center">
|
|||
|
|
<div class="xxl m-b-10">{{ shopInfo.on_sale_count }}</div>
|
|||
|
|
<div>全部商品</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex-1 text-center">
|
|||
|
|
<div class="xxl m-b-10">{{ shopInfo.follow_num }}</div>
|
|||
|
|
<div>关注人数</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<el-divider></el-divider>
|
|||
|
|
<div class="flex xs m-b-16">
|
|||
|
|
<div class="m-r-12">店铺星级</div>
|
|||
|
|
<div class="m-t-5">
|
|||
|
|
<el-rate v-model="shopInfo.star" disabled> </el-rate>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex xs m-b-16">
|
|||
|
|
<div class="m-r-12">店铺评分</div>
|
|||
|
|
<div class="">{{ shopInfo.score }}分</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex row-center row-between">
|
|||
|
|
<div class="flex row-center">
|
|||
|
|
<el-button size="mini" @click="shopFollow">{{
|
|||
|
|
shopInfo.shop_follow_status == 1 ? '已关注' : '关注店铺'
|
|||
|
|
}}</el-button>
|
|||
|
|
</div>
|
|||
|
|
<el-popover placement="bottom" width="200" trigger="hover">
|
|||
|
|
<div>
|
|||
|
|
<el-image style="width: 100%" :src="shopInfo.customer_image"></el-image>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div slot="reference" class="xs lighter text-center">
|
|||
|
|
<i class="el-icon-chat-dot-round nr"></i>
|
|||
|
|
<span>联系客服</span>
|
|||
|
|
</div>
|
|||
|
|
</el-popover>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 商品分类 -->
|
|||
|
|
<div class="m-t-10 bg-white">
|
|||
|
|
<div class="l-fen flex row-center" @click="getClassGoods('')"
|
|||
|
|
:class="gClassId == ''?'l-fen-select':''">
|
|||
|
|
全部商品
|
|||
|
|
</div>
|
|||
|
|
<div class="" v-for="(item, index) in goodsClassList" :key="index" @click="getClassGoods(item.id)">
|
|||
|
|
<div class="l-fen flex row-center" v-show="index < 4"
|
|||
|
|
:class="gClassId == item.id?'l-fen-select':''">
|
|||
|
|
{{item.name}}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- right -->
|
|||
|
|
<div class="right m-l-15">
|
|||
|
|
<!-- 领券 -->
|
|||
|
|
<div class="bg-white" v-if="couponsList.length && xuanIndex == ''">
|
|||
|
|
<div class="coupon-list">
|
|||
|
|
<div class="m-b-10 flex row-between">
|
|||
|
|
<div class="">
|
|||
|
|
领券
|
|||
|
|
</div>
|
|||
|
|
<div class="flex row-center coupons-more" @click="more=!more" v-if="couponsList.length > 3">
|
|||
|
|
<div class="m-r-5">
|
|||
|
|
更多
|
|||
|
|
</div>
|
|||
|
|
<i :class="more?'el-icon-arrow-up':'el-icon-arrow-down'"></i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex" :class="more? 'swiper-item-zk':'swiper-item-c'">
|
|||
|
|
<div class="item" v-for="(item, index) in couponsList" :key="index">
|
|||
|
|
<div :class="[
|
|||
|
|
'info white',
|
|||
|
|
{ gray: item.is_get },
|
|||
|
|
]">
|
|||
|
|
<div class="info-hd flex">
|
|||
|
|
<div>
|
|||
|
|
<price-formate :price="item.money" :first-size="38" :second-size="38" />
|
|||
|
|
</div>
|
|||
|
|
<div class="m-l-8 flex1">
|
|||
|
|
<div class="line1">{{ item.name }}</div>
|
|||
|
|
<div class="xs line1">{{ item.condition_type_desc }}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-time xs">{{ item.user_time_desc }}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex row-between coupon-button">
|
|||
|
|
<div class="tips-con xs lighter">
|
|||
|
|
{{ item.use_scene_desc }}
|
|||
|
|
</div>
|
|||
|
|
<div class="primary sm" @click="hqCoupon(item.id)" v-if="!item.is_get">
|
|||
|
|
立即领取
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<img v-if="item.is_get" class="receice" src="~/static/images/coupons_img_receive.png"
|
|||
|
|
alt="" />
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 店铺推荐 -->
|
|||
|
|
<div class="shop-list" v-if="recommend && xuanIndex == ''">
|
|||
|
|
<div class="m-b-10">
|
|||
|
|
店铺推荐
|
|||
|
|
</div>
|
|||
|
|
<el-carousel arrow="never" indicator-position="outside" trigger="click" height="300px"
|
|||
|
|
:autoplay="false">
|
|||
|
|
<el-carousel-item v-for="(itemd, indexd) in recommend" :key="indexd">
|
|||
|
|
<div class="flex">
|
|||
|
|
|
|||
|
|
<div class="shop-item" v-for="(itemg, indexg) in itemd" :key="indexg">
|
|||
|
|
<nuxt-link :to="`/goods_details/${itemg.id}`">
|
|||
|
|
<div class="">
|
|||
|
|
<div class="">
|
|||
|
|
<el-image :src="itemg.image" style="height: 200px; width: 200px;">
|
|||
|
|
</el-image>
|
|||
|
|
</div>
|
|||
|
|
<div class="name m-l-10 line-1">
|
|||
|
|
{{itemg.name}}
|
|||
|
|
</div>
|
|||
|
|
<div class="m-l-10 flex">
|
|||
|
|
<div class="primary m-r-8">
|
|||
|
|
<price-formate :price="itemg.min_price" :first-size="16" />
|
|||
|
|
</div>
|
|||
|
|
<div class="muted sm line-through">
|
|||
|
|
<price-formate :price="itemg.market_price" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</nuxt-link>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-carousel-item>
|
|||
|
|
</el-carousel>
|
|||
|
|
</div>
|
|||
|
|
<!-- 分类商品 -->
|
|||
|
|
<div :class="xuanIndex == ''? 'm-t-10':''">
|
|||
|
|
<div class="sort m-b-16 flex bg-white col-top" id="goods-sort">
|
|||
|
|
<div class="sort-title">排序方式：</div>
|
|||
|
|
<div class="sort-name m-l-16 flex">
|
|||
|
|
<div :class="['item', { active: sortType == '' }]" @click="changeSortType('')">
|
|||
|
|
综合
|
|||
|
|
</div>
|
|||
|
|
<div :class="['item', { active: sortType == 'price' }]" @click="changeSortType('price')">
|
|||
|
|
价格
|
|||
|
|
<i v-show="priceSort == 'desc'" class="el-icon-arrow-down"></i>
|
|||
|
|
<i v-show="priceSort == 'asc'" class="el-icon-arrow-up"></i>
|
|||
|
|
</div>
|
|||
|
|
<div :class="['item', { active: sortType == 'sales_sum' }]"
|
|||
|
|
@click="changeSortType('sales_sum')">
|
|||
|
|
销量
|
|||
|
|
<i v-show="saleSort == 'desc'" class="el-icon-arrow-down"></i>
|
|||
|
|
<i v-show="saleSort == 'asc'" class="el-icon-arrow-up"></i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<template v-if="goodsList.length">
|
|||
|
|
<goods-list :list="goodsList" :num="4" />
|
|||
|
|
<div class="pagination flex m-t-30 row-center" style="padding-bottom: 38px" v-if="count">
|
|||
|
|
<el-pagination background layout="prev, pager, next" :total="count" prev-text="上一页"
|
|||
|
|
next-text="下一页" hide-on-single-page :page-size="20" @current-change="changePage">
|
|||
|
|
</el-pagination>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<null-data v-else :img="require('~/static/images/goods_null.png')" text="暂无商品~"></null-data>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {
|
|||
|
|
trottle
|
|||
|
|
} from "~/utils/tools";
|
|||
|
|
import {
|
|||
|
|
Message
|
|||
|
|
} from 'element-ui';
|
|||
|
|
export default {
|
|||
|
|
head() {
|
|||
|
|
return {
|
|||
|
|
title: this.$store.getters.headTitle,
|
|||
|
|
link: [{
|
|||
|
|
rel: 'icon',
|
|||
|
|
type: 'image/x-icon',
|
|||
|
|
href: this.$store.getters.favicon,
|
|||
|
|
}, ],
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
layout: "street",
|
|||
|
|
|
|||
|
|
components: {},
|
|||
|
|
async asyncData({
|
|||
|
|
$get,
|
|||
|
|
query,
|
|||
|
|
}) {
|
|||
|
|
// 店铺信息
|
|||
|
|
const
|
|||
|
|
shopData = await $get("shop/getShopInfo", {
|
|||
|
|
params: {
|
|||
|
|
shop_id: query.id
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
if (shopData.code == 1) {
|
|||
|
|
if (shopData.data.goods_list.length > 0) {
|
|||
|
|
var num = [];
|
|||
|
|
for (var i = 0; i < Math.ceil(shopData.data.goods_list.length / 4); i++) {
|
|||
|
|
var start = i * 4;
|
|||
|
|
var end = start + 4;
|
|||
|
|
num.push(shopData.data.goods_list.slice(start, end));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
console.log('num', num)
|
|||
|
|
|
|||
|
|
// 获取优惠券
|
|||
|
|
const
|
|||
|
|
coupon = await $get("coupon/getCouponList", {
|
|||
|
|
params: {
|
|||
|
|
shop_id: query.id
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 商品分类
|
|||
|
|
const
|
|||
|
|
goodsClass = await $get("shop_goods_category/getShopGoodsCategory", {
|
|||
|
|
params: {
|
|||
|
|
shop_id: query.id
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (goodsClass.code == 1) {
|
|||
|
|
if (goodsClass.data.length > 0) {
|
|||
|
|
var group = [];
|
|||
|
|
for (var i = 0; i < Math.ceil(goodsClass.data.length / 6); i++) {
|
|||
|
|
var start = i * 6;
|
|||
|
|
var end = start + 6;
|
|||
|
|
group.push(goodsClass.data.slice(start, end));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
console.log('group', group)
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
recommend: num, // 推荐列表
|
|||
|
|
shopInfo: shopData.data, // 商家信息
|
|||
|
|
goodsClassList: goodsClass.data, // 商品分类列表
|
|||
|
|
goodsClassListGroup: group, // 商品分类切割列表
|
|||
|
|
couponsList: coupon.data.lists, // 优惠券列表
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
goodsClassListGroup: [],
|
|||
|
|
recommend: [],
|
|||
|
|
couponsList: [],
|
|||
|
|
gClassId: '',
|
|||
|
|
shopInfo: [],
|
|||
|
|
goodsClassList: [],
|
|||
|
|
swiperOptions: {
|
|||
|
|
pagination: {
|
|||
|
|
el: '.swiper-pagination',
|
|||
|
|
clickable: true,
|
|||
|
|
},
|
|||
|
|
navigation: {
|
|||
|
|
nextEl: '.swiper-button-next',
|
|||
|
|
prevEl: '.swiper-button-prev',
|
|||
|
|
},
|
|||
|
|
preventClicks: true,
|
|||
|
|
slidesPerView: 'auto',
|
|||
|
|
autoplay: true,
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
sortType: "",
|
|||
|
|
saleSort: "desc",
|
|||
|
|
priceSort: "desc",
|
|||
|
|
page: 1,
|
|||
|
|
count: 0,
|
|||
|
|
goodsList: [],
|
|||
|
|
|
|||
|
|
more: false,
|
|||
|
|
|
|||
|
|
keyword: '',
|
|||
|
|
xuanIndex: '',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
created() {
|
|||
|
|
this.getGoods();
|
|||
|
|
this.changeSortType = trottle(this.changeSortType, 500, this);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
methods: {
|
|||
|
|
// 搜索商品
|
|||
|
|
search() {
|
|||
|
|
this.getGoods()
|
|||
|
|
|
|||
|
|
// 搜索后跳转到商品列表位置
|
|||
|
|
if(this.xuanIndex == '') {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
document.getElementById('goods-sort').scrollIntoView()
|
|||
|
|
}, 500)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 顶部商品分类选择事件
|
|||
|
|
changeXuan(id) {
|
|||
|
|
this.xuanIndex = id
|
|||
|
|
if (id == 'all') {
|
|||
|
|
this.gClassId = ''
|
|||
|
|
this.getGoods()
|
|||
|
|
} else {
|
|||
|
|
this.gClassId = id
|
|||
|
|
this.getGoods()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 店铺信息
|
|||
|
|
async getShopData() {
|
|||
|
|
const
|
|||
|
|
shopData = await this.$get("shop/getShopInfo", {
|
|||
|
|
params: {
|
|||
|
|
shop_id: this.$route.query.id
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (shopData.code == 1) {
|
|||
|
|
|
|||
|
|
this.shopInfo = shopData.data
|
|||
|
|
// 切割推荐列表
|
|||
|
|
if (shopData.data.goods_list.length > 0) {
|
|||
|
|
var num = [];
|
|||
|
|
for (var i = 0; i < Math.ceil(shopData.data.goods_list.length / 4); i++) {
|
|||
|
|
var start = i * 4;
|
|||
|
|
var end = start + 4;
|
|||
|
|
num.push(shopData.data.goods_list.slice(start, end));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
console.log('num', num)
|
|||
|
|
this.recommend = num
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 关注店铺
|
|||
|
|
shopFollow() {
|
|||
|
|
const a = this.$post("shop_follow/changeStatus", {
|
|||
|
|
shop_id: this.$route.query.id
|
|||
|
|
});
|
|||
|
|
this.getShopData()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 领取优惠券
|
|||
|
|
async hqCoupon(id) {
|
|||
|
|
const {
|
|||
|
|
msg,
|
|||
|
|
code
|
|||
|
|
} = await this.$post("coupon/getCoupon", {
|
|||
|
|
coupon_id: id,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (code == 1) {
|
|||
|
|
this.$message({
|
|||
|
|
message: msg,
|
|||
|
|
type: "success",
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
this.getCouponList()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 获取优惠券列表
|
|||
|
|
async getCouponList() {
|
|||
|
|
const
|
|||
|
|
coupon = await this.$get("coupon/getCouponList", {
|
|||
|
|
params: {
|
|||
|
|
shop_id: this.$route.query.id
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 点击商品分类
|
|||
|
|
getClassGoods(id) {
|
|||
|
|
this.gClassId = id
|
|||
|
|
|
|||
|
|
if (id == '') {
|
|||
|
|
this.xuanIndex = 'all'
|
|||
|
|
} else {
|
|||
|
|
this.xuanIndex = id
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.getGoods()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
changeSortType(type) {
|
|||
|
|
this.sortType = type;
|
|||
|
|
switch (type) {
|
|||
|
|
case "price":
|
|||
|
|
if (this.priceSort == "asc") {
|
|||
|
|
this.priceSort = "desc";
|
|||
|
|
} else if (this.priceSort == "desc") {
|
|||
|
|
this.priceSort = "asc";
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
case "sales_sum":
|
|||
|
|
if (this.saleSort == "asc") {
|
|||
|
|
this.saleSort = "desc";
|
|||
|
|
} else if (this.saleSort == "desc") {
|
|||
|
|
this.saleSort = "asc";
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
}
|
|||
|
|
this.getGoods();
|
|||
|
|
},
|
|||
|
|
changePage(current) {
|
|||
|
|
this.page = current;
|
|||
|
|
this.getGoods();
|
|||
|
|
},
|
|||
|
|
async getGoods() {
|
|||
|
|
const {
|
|||
|
|
name
|
|||
|
|
} = this.$route.query;
|
|||
|
|
const {
|
|||
|
|
priceSort,
|
|||
|
|
sortType,
|
|||
|
|
saleSort
|
|||
|
|
} = this;
|
|||
|
|
let sort = "";
|
|||
|
|
switch (sortType) {
|
|||
|
|
case "price":
|
|||
|
|
sort = priceSort;
|
|||
|
|
break;
|
|||
|
|
case "sales_sum":
|
|||
|
|
sort = saleSort;
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
const {
|
|||
|
|
data: {
|
|||
|
|
list,
|
|||
|
|
count
|
|||
|
|
},
|
|||
|
|
} = await this.$get("pc/goodsList", {
|
|||
|
|
params: {
|
|||
|
|
page_size: 20,
|
|||
|
|
page_no: this.page,
|
|||
|
|
sort_type: sortType,
|
|||
|
|
sort,
|
|||
|
|
category_id: this.gClassId,
|
|||
|
|
shop_id: this.$route.query.id,
|
|||
|
|
name: this.keyword,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
this.count = count
|
|||
|
|
this.goodsList = list;
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.shop {
|
|||
|
|
width: 227px;
|
|||
|
|
padding: 15px;
|
|||
|
|
|
|||
|
|
.logo-img {
|
|||
|
|
width: 62px;
|
|||
|
|
height: 62px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-rate__icon {
|
|||
|
|
font-size: 16px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.h-item {
|
|||
|
|
width: 82px;
|
|||
|
|
height: 24px;
|
|||
|
|
margin-right: 30px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.h-item-x {
|
|||
|
|
border-radius: 100px;
|
|||
|
|
background-color: #FF2C3C;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search {
|
|||
|
|
width: 240px;
|
|||
|
|
|
|||
|
|
::v-deep .el-input {
|
|||
|
|
width: 240px;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shop-details {
|
|||
|
|
margin-top: 10px;
|
|||
|
|
|
|||
|
|
.left {
|
|||
|
|
.l-border {
|
|||
|
|
padding-bottom: 27px;
|
|||
|
|
border-bottom: 1px solid #EEEEEE;
|
|||
|
|
margin-bottom: 27px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.desc {
|
|||
|
|
color: #101010;
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.desc-b {
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.desc-n {
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
font-size: 18px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.desc-n {
|
|||
|
|
color: #101010;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.left-btn {
|
|||
|
|
width: 82px;
|
|||
|
|
height: 29px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
border: 1px solid rgba(187, 187, 187, 100);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.left-shop {
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
padding: 20px 15px;
|
|||
|
|
width: 210px;
|
|||
|
|
height: 364px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.r-color-h {
|
|||
|
|
background-color: #A4ADB3;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.l-tips {
|
|||
|
|
padding: 1px 2px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.l-fen {
|
|||
|
|
width: 210px;
|
|||
|
|
height: 44px;
|
|||
|
|
line-height: 20px;
|
|||
|
|
color: rgba(16, 16, 16, 100);
|
|||
|
|
font-size: 14px;
|
|||
|
|
text-align: center;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.l-fen-select {
|
|||
|
|
color: #FF2C3C;
|
|||
|
|
;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.right {
|
|||
|
|
width: 961px;
|
|||
|
|
|
|||
|
|
.coupon-list {
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
padding: 20px 0;
|
|||
|
|
margin: 0 20px;
|
|||
|
|
border-bottom: 1px solid #EEEEEE;
|
|||
|
|
|
|||
|
|
.coupons-more {
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.swiper-item-c {
|
|||
|
|
width: 760px;
|
|||
|
|
// height: 120px;
|
|||
|
|
|
|||
|
|
flex-wrap: nowrap;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.swiper-item-zk {
|
|||
|
|
width: 770px;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shop-list {
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
height: 360px;
|
|||
|
|
padding: 0 20px;
|
|||
|
|
padding-top: 10px;
|
|||
|
|
|
|||
|
|
.shop-item {
|
|||
|
|
width: 200px;
|
|||
|
|
height: 298px;
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
margin-right: 12px;
|
|||
|
|
|
|||
|
|
.name {
|
|||
|
|
color: rgba(16, 16, 16, 100);
|
|||
|
|
font-size: 14px;
|
|||
|
|
text-align: left;
|
|||
|
|
margin-bottom: 18px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.sort {
|
|||
|
|
padding: 16px 16px 0;
|
|||
|
|
|
|||
|
|
.sort-name {
|
|||
|
|
.item {
|
|||
|
|
margin-right: 30px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
|
|||
|
|
&.active {
|
|||
|
|
color: #FF2C3C
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.swiper {}
|
|||
|
|
|
|||
|
|
.swiper-item {
|
|||
|
|
width: 672px;
|
|||
|
|
// box-sizing: content-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item {
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
margin-right: 16px;
|
|||
|
|
position: relative;
|
|||
|
|
cursor: pointer;
|
|||
|
|
|
|||
|
|
.coupon-button {
|
|||
|
|
background-color: #f2f2f2;
|
|||
|
|
width: 240px;
|
|||
|
|
height: 30px;
|
|||
|
|
padding: 0 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info {
|
|||
|
|
padding: 0 10px;
|
|||
|
|
background: url("~/static/images/bg_coupon_s.png") no-repeat;
|
|||
|
|
width: 240px;
|
|||
|
|
height: 80px;
|
|||
|
|
background-size: 100%;
|
|||
|
|
|
|||
|
|
&.gray {
|
|||
|
|
background-image: url("~/static/images/bg_coupon.png");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-hd {
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tips {
|
|||
|
|
position: relative;
|
|||
|
|
background-color: #f2f2f2;
|
|||
|
|
height: 30px;
|
|||
|
|
padding: 0 8px;
|
|||
|
|
|
|||
|
|
.tips-con {
|
|||
|
|
width: 100%;
|
|||
|
|
left: 0;
|
|||
|
|
background-color: #f2f2f2;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 30px;
|
|||
|
|
padding: 10px;
|
|||
|
|
z-index: 99;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.receice {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
right: 0px;
|
|||
|
|
width: 58px;
|
|||
|
|
height: 45px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.choose {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
right: 0;
|
|||
|
|
background-color: #ffe72c;
|
|||
|
|
color: $--color-primary;
|
|||
|
|
padding: 1px 5px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.more {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 20px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
right: 30px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|