You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
910 lines
26 KiB
910 lines
26 KiB
<template>
|
|
<div class="goods_detail wrapper_1200">
|
|
<div class="crumbs">
|
|
<el-breadcrumb separator="/">
|
|
<el-breadcrumb-item :to="{ path: '/' }">全部商品</el-breadcrumb-item>
|
|
<el-breadcrumb-item>其他</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
</div>
|
|
<div class="goods_detail_nav">
|
|
<div class="goods_detail_nav_left">
|
|
<div class="goods_detail_video" v-show="detailTabId == 0">
|
|
<video
|
|
muted
|
|
autoplay
|
|
loop
|
|
controls
|
|
:src="imgUrl + detailData.video_url"
|
|
></video>
|
|
</div>
|
|
<div class="goods_detail_img" v-show="detailTabId == 1">
|
|
<el-carousel
|
|
trigger="click"
|
|
:autoplay="false"
|
|
@change="imgchange"
|
|
ref="remarkCarusel"
|
|
indicator-position="none"
|
|
>
|
|
<el-carousel-item v-for="(carouselItem, i) in carouselList" :key="i">
|
|
<img :src="imgUrl + carouselItem" alt />
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
<div class="carousel_bottom">
|
|
<div
|
|
class="carousel_bottom_list"
|
|
v-for="(item, index) in carouselList"
|
|
:key="index"
|
|
>
|
|
<div
|
|
:class="{ carousel_active: index == currentImg }"
|
|
@click="currentImgChange(index)"
|
|
>
|
|
<img :src="imgUrl + item" alt />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 切换商品视频和图片 -->
|
|
<div
|
|
class="goods_detail_nav_left_btn"
|
|
v-if="detailData.video_url || carouselList.length"
|
|
>
|
|
<span
|
|
class="goods_detail_nav_left_btn_v"
|
|
v-show="detailData.video_url"
|
|
@click="detailTabId = 0"
|
|
:class="{ active: detailTabId === 0 }"
|
|
>视 频</span
|
|
>
|
|
<span
|
|
@click="detailTabId = 1"
|
|
:class="{ active: detailTabId === 1 }"
|
|
v-show="carouselList.length"
|
|
>图 片</span
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="goods_detail_nav_right">
|
|
<p class="title">{{ detailData.goods_name }}</p>
|
|
<div class="price" v-if="userInfo.show_price">
|
|
<div class="packagePrice">
|
|
<span>¥{{ detailData.discount_price }}</span>
|
|
</div>
|
|
<div class="originalPrice" v-if="detailData.discount_price != detailData.price">
|
|
原价¥
|
|
<span>{{ detailData.price }}</span>
|
|
</div>
|
|
<!-- <div class="Integral">
|
|
<img style="width: 16px; height: 16px" src="~assets/images/giveIntegral.png" alt />
|
|
<span class="integral_txt">每满一元送1积分</span>
|
|
</div>-->
|
|
</div>
|
|
<!-- <p class="package">规格：20g+12g+40g+56g</p> -->
|
|
<div class="address_Box">
|
|
<div>商品编号：{{ detailData.goods_code }}</div>
|
|
<div>销量：{{ detailData.sale_num }}</div>
|
|
</div>
|
|
<div class="address_Box">
|
|
<div>起订：{{ detailData.min_buy }}</div>
|
|
<div v-if="detailData.max_buy">限购：{{ detailData.max_buy }}</div>
|
|
<div>库存:{{ detailData.stock }}</div>
|
|
</div>
|
|
<div class="address_Box">
|
|
<div style="display: flex" v-if="!detailData.is_free_shipping">
|
|
<div>配送:</div>
|
|
|
|
<el-popover placement="top-start" width="500" trigger="hover">
|
|
<div v-for="(item, index) in express_info.template_item" :key="index">
|
|
<div class="content" v-if="item.fee_type == 1">
|
|
<div class="desc">可配送区域：{{ item.area_names }}</div>
|
|
<div class="descRuler" style="display: flex; margin-right: 20px">
|
|
<div style="margin-right: 20px">首重:{{ item.snum }}(kg)</div>
|
|
<div>运费:{{ item.sprice }}(元)</div>
|
|
</div>
|
|
<div class="descRuler" style="display: flex; margin-right: 20px">
|
|
<div style="margin-right: 20px">续重:{{ item.xnum }}(kg)</div>
|
|
<div>续费:{{ item.xprice }}(元)</div>
|
|
</div>
|
|
</div>
|
|
<div class="content" v-if="item.fee_type == 2">
|
|
<div class="desc">可配送区域：{{ item.area_names }}</div>
|
|
<div class="descRuler" style="display: flex; margin-right: 20px">
|
|
<div style="margin-right: 20px">首体积:{{ item.snum }}(m³)</div>
|
|
<div>运费:{{ item.sprice }}(元)</div>
|
|
</div>
|
|
<div class="descRuler" style="display: flex; margin-right: 20px">
|
|
<div style="margin-right: 20px">续体积:{{ item.xnum }}(m³)</div>
|
|
<div>续费:{{ item.xprice }}(元)</div>
|
|
</div>
|
|
</div>
|
|
<div class="content" v-if="item.fee_type == 3">
|
|
<div class="desc">可配送区域：{{ item.area_names }}</div>
|
|
<div class="descRuler" style="display: flex; margin-right: 20px">
|
|
<div style="margin-right: 20px">首件:{{ item.snum }}(个)</div>
|
|
<div>运费:{{ item.sprice }}(元)</div>
|
|
</div>
|
|
<div class="descRuler" style="display: flex; margin-right: 20px">
|
|
<div>续件:{{ item.xnum }}(个)</div>
|
|
<div>续费:{{ item.xprice }}(元)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div slot="reference" style="color: var(--themeColor)">
|
|
{{ express_info.template_name }}
|
|
</div>
|
|
</el-popover>
|
|
</div>
|
|
<div>运费：{{ detailData.is_free_shipping ? "包邮" : "自费" }}</div>
|
|
</div>
|
|
|
|
<div class="order" v-if="userInfo.show_price">
|
|
订购数量：
|
|
<div class="jbq" @click.stop.prevent>
|
|
<el-input-number
|
|
v-model="commodityNum"
|
|
size="mini"
|
|
@change="handleChange"
|
|
:min="0"
|
|
></el-input-number>
|
|
</div>
|
|
</div>
|
|
<div class="goods_detail_nav_right_btn">
|
|
<el-button
|
|
v-if="userInfo.show_price"
|
|
type="primary"
|
|
icon="el-icon-shopping-cart-1"
|
|
@click="cart_success()"
|
|
size="small"
|
|
>加入购物车</el-button
|
|
>
|
|
<el-button
|
|
@click="collection_Type"
|
|
size="small"
|
|
icon="el-icon-star-off"
|
|
:class="isCollect ? 'collectAct1' : 'collectAct2'"
|
|
>{{ isCollect ? "取消收藏" : "收藏" }}</el-button
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="goods_detail_option">
|
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
|
<el-tab-pane label="商品详情" name="detail">
|
|
<div class="goods_detail_option_box">
|
|
<div>生产企业：{{ detailData.business }}</div>
|
|
<div v-if="detailData.execu_content">
|
|
执行标准：{{ detailData.execu_content.title }}
|
|
</div>
|
|
<div>产地：{{ detailData.address }}</div>
|
|
</div>
|
|
<div v-html="detailData.goods_content"></div>
|
|
|
|
<!-- <p class="goods_detail_option_text">
|
|
<span>商品型号：28g/袋</span>
|
|
<span>产地：山东</span>
|
|
<span>规格：28g/袋</span>
|
|
<span>执行标准：《中国药典》2022年版一部</span>
|
|
<span>生产企业：安国市远光药业有限公司</span>
|
|
</p>-->
|
|
<div class="goods_detail_option_banner">
|
|
<img :src="imgUrl + v" alt v-for="(v, i) in detailimage" :key="i" />
|
|
</div>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="商品评价" name="evaluate">
|
|
<div class="goods_detail_evaluate">
|
|
<div
|
|
@click="evaluateChange(0)"
|
|
:class="{ evaluate_active: evaluateTabId === 0 }"
|
|
>
|
|
全部({{ evaluateData.total }})
|
|
</div>
|
|
<div
|
|
@click="evaluateChange(1)"
|
|
:class="{ evaluate_active: evaluateTabId === 1 }"
|
|
>
|
|
好评({{ evaluateData.haoping }})
|
|
</div>
|
|
<div
|
|
@click="evaluateChange(2)"
|
|
:class="{ evaluate_active: evaluateTabId === 2 }"
|
|
>
|
|
中评({{ evaluateData.zhongping }})
|
|
</div>
|
|
<div
|
|
@click="evaluateChange(3)"
|
|
:class="{ evaluate_active: evaluateTabId === 3 }"
|
|
>
|
|
差评({{ evaluateData.chaping }})
|
|
</div>
|
|
</div>
|
|
<template v-if="goods_detail_commentList.length">
|
|
<div
|
|
class="goods_detail_comment_Box"
|
|
v-for="(commentItem, commentIndex) in goods_detail_commentList"
|
|
:key="commentIndex"
|
|
>
|
|
<div class="goods_detail_comment_head">
|
|
<img :src="imgUrl + commentItem.member_headimg" alt />
|
|
</div>
|
|
<div class="goods_detail_comment_content">
|
|
<div class="content_name">{{ commentItem.member_name }}</div>
|
|
<div class="content_time">
|
|
{{
|
|
$dayjs(commentItem.create_time * 1000).format("YYYY-MM-DD HH:mm:ss")
|
|
}}
|
|
</div>
|
|
<div class="content_txt">{{ commentItem.content }}</div>
|
|
<div class="content_image" v-if="commentImgs.length > 0">
|
|
<div v-for="(imgV, imgI) in commentImgs" :key="imgI">
|
|
<img :src="imgUrl + imgV" alt />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Page
|
|
:total="commentPage.total"
|
|
:pageSize="commentPage.pageSize"
|
|
:currentPage="commentPage.currentPage"
|
|
:emptyShow="false"
|
|
/>
|
|
</template>
|
|
<div v-if="!goods_detail_commentList.length" class="nothing">
|
|
<img src="@/assets/images/noGoods.png" />
|
|
暂无评价，去看点别的吧
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
|
|
<div v-show="optionName != 'evaluate'">
|
|
<Guess
|
|
v-if="guessList.length"
|
|
:guessList="guessList"
|
|
:Page="guessPage"
|
|
@changePage="changePage"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Setting from "~/setting";
|
|
import countDown from "@/components/countDown";
|
|
import Guess from "@/components/guess.vue";
|
|
export default {
|
|
auth: false,
|
|
components: { Guess, countDown },
|
|
data() {
|
|
return {
|
|
isSignin: localStorage.getItem("token") ? true : false,
|
|
userInfo: {},
|
|
imgUrl: Setting.uplodBaseURL,
|
|
activeName: "detail",
|
|
commodityNum: "",
|
|
detailTabId: 1,
|
|
carouselList: [],
|
|
guessList: [],
|
|
detailData: {
|
|
execu_content: {
|
|
title: "",
|
|
},
|
|
},
|
|
express_info: {
|
|
template_item: [],
|
|
},
|
|
detailimage: [],
|
|
seckillData: {},
|
|
currentImg: "",
|
|
optionName: "",
|
|
evaluateTabId: 0,
|
|
goods_detail_commentList: [],
|
|
evaluateData: {},
|
|
commentImgs: "",
|
|
// 商品评价分页
|
|
commentPage: {
|
|
total: 30,
|
|
pageSize: 10,
|
|
currentPage: 1,
|
|
},
|
|
// 为你推荐分页
|
|
guessPage: {
|
|
total: 0,
|
|
pageSize: 4,
|
|
currentPage: 1,
|
|
},
|
|
// 是否收藏成功
|
|
collectionType: false,
|
|
// 套餐商品
|
|
isPackage: false,
|
|
// 秒杀商品
|
|
isSeckill: false,
|
|
//拼团商品
|
|
isCollage: false,
|
|
// 是否已收藏
|
|
isCollect: 0,
|
|
};
|
|
},
|
|
|
|
created() {
|
|
// 已登录
|
|
if (this.isSignin) {
|
|
this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
|
|
}
|
|
this.getData();
|
|
this.getEvaluateData();
|
|
this.evaluateChange(0);
|
|
this.getGuessData();
|
|
console.log(this.isSeckill);
|
|
},
|
|
mounted() {},
|
|
methods: {
|
|
// 获取商品详情
|
|
getData() {
|
|
this.detailData = [];
|
|
this.carouselList = [];
|
|
let obj = {
|
|
// seckill_info:,
|
|
goods_id: this.$route.params.id,
|
|
province_name: "成都",
|
|
};
|
|
this.$axios
|
|
.post(`/goodssku/detail`, obj)
|
|
.then((res) => {
|
|
this.detailData = res.data.goods_sku_detail;
|
|
this.seckillData = res.data.seckill_info;
|
|
this.seckillData = res.data.seckill_info;
|
|
if (this.detailData.sku_images) {
|
|
this.carouselList = this.detailData.sku_images.split(",");
|
|
} else {
|
|
this.carouselList.push(this.detailData.sku_image);
|
|
}
|
|
this.detailimage = this.detailData.goods_image.split(",");
|
|
this.express_info = this.detailData.express_info;
|
|
console.log(this.detailData);
|
|
this.getIsCollect();
|
|
})
|
|
.catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
|
|
// 是否收藏
|
|
getIsCollect() {
|
|
let { goods_id } = { ...this.detailData };
|
|
this.$axios
|
|
.post(`/goodscollect/iscollect`, { goods_id })
|
|
.then((res) => {
|
|
this.isCollect = res.data;
|
|
})
|
|
.catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
// 获取商品评价数
|
|
getEvaluateData() {
|
|
let obj = { goods_id: this.$route.params.id };
|
|
this.$axios
|
|
.post(`/goodsevaluate/getGoodsEvaluate`, obj)
|
|
.then((res) => {
|
|
this.evaluateData = res.data;
|
|
})
|
|
.catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
// 获取商品评价列表
|
|
evaluateChange(num) {
|
|
this.evaluateTabId = num;
|
|
let obj = {
|
|
goods_id: this.$route.params.id,
|
|
explain_type: num == 0 ? "" : num,
|
|
};
|
|
this.$axios
|
|
.post(`/goodsevaluate/page`, obj)
|
|
.then((res) => {
|
|
this.goods_detail_commentList = res.data.list;
|
|
this.commentPage.total = res.data.count;
|
|
// 截取评价图地址放进数组
|
|
this.goods_detail_commentList.map((item) => {
|
|
this.commentImgs = item.images.split(",");
|
|
});
|
|
})
|
|
.catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
// 获取为你推荐数据
|
|
getGuessData() {
|
|
let obj = {
|
|
page: this.guessPage.currentPage,
|
|
page_size: this.guessPage.pageSize,
|
|
goods_id: this.$route.params.id,
|
|
};
|
|
this.$axios
|
|
.post(`/goodssku/getLikeLists`, obj)
|
|
.then((res) => {
|
|
res.data.list.forEach((item) => {
|
|
item["num"] = 0;
|
|
});
|
|
this.guessList = res.data.list;
|
|
|
|
this.guessPage.total = res.data.count;
|
|
})
|
|
.catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
changePage(e) {
|
|
this.guessPage.currentPage = e;
|
|
this.getGuessData();
|
|
},
|
|
handleClick(tab, event) {
|
|
this.optionName = tab.name;
|
|
},
|
|
handleChange() {},
|
|
imgchange(val) {
|
|
this.currentImg = val;
|
|
},
|
|
currentImgChange(index) {
|
|
this.currentImg = index;
|
|
this.$refs.remarkCarusel.setActiveItem(index);
|
|
},
|
|
/**
|
|
* 加入购物车
|
|
*/
|
|
cart_success() {
|
|
if (this.commodityNum == 0) {
|
|
this.$message.error("未添加商品数量");
|
|
} else if (this.commodityNum < this.detailData.min_buy) {
|
|
this.$message({
|
|
message: "最少不低于起订数量",
|
|
type: "warning",
|
|
});
|
|
} else {
|
|
let obj = {
|
|
num: this.commodityNum,
|
|
sku_id: this.detailData.sku_id,
|
|
};
|
|
this.$axios
|
|
.post(`/cart/add`, obj)
|
|
.then((res) => {
|
|
this.$message({
|
|
message: "成功添加购物车",
|
|
type: "success",
|
|
});
|
|
})
|
|
.catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
}
|
|
},
|
|
collection_Type() {
|
|
console.log(this.isCollect);
|
|
let { goods_id, sku_id, sku_name, sku_price, sku_image } = {
|
|
...this.detailData,
|
|
};
|
|
let obj = { goods_id, sku_id, sku_name, sku_price, sku_image };
|
|
if (!this.isCollect) {
|
|
this.$axios.post(`/goodscollect/add`, obj).then((res) => {
|
|
this.$message({
|
|
message: "收藏成功",
|
|
type: "success",
|
|
offset: 100,
|
|
});
|
|
});
|
|
} else {
|
|
this.$axios.post(`/goodscollect/delete`, { goods_id }).then((res) => {
|
|
this.$message({
|
|
message: "成功取消收藏",
|
|
type: "warning",
|
|
offset: 100,
|
|
});
|
|
});
|
|
}
|
|
this.getData();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.goods_detail {
|
|
.crumbs {
|
|
margin-top: 20px;
|
|
}
|
|
.goods_detail_nav {
|
|
width: 1200px;
|
|
height: 350px;
|
|
background: #ffffff;
|
|
border-radius: 4px;
|
|
margin: 16px auto;
|
|
display: flex;
|
|
position: relative;
|
|
.goods_detail_nav_left {
|
|
width: 510px;
|
|
height: 320px;
|
|
// border: 1px solid #aaa;
|
|
margin: 15px;
|
|
position: relative;
|
|
color: #999999;
|
|
.goods_detail_video,
|
|
.goods_detail_img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.goods_detail_video {
|
|
video {
|
|
width: 100%;
|
|
height: 320px;
|
|
}
|
|
}
|
|
.goods_detail_img {
|
|
position: relative;
|
|
/deep/ .el-carousel {
|
|
.el-carousel__container {
|
|
height: 320px;
|
|
.el-carousel__item {
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.carousel_bottom {
|
|
width: 100%;
|
|
height: 100px;
|
|
position: absolute;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
z-index: 10;
|
|
.carousel_bottom_list {
|
|
float: left;
|
|
margin: 10px;
|
|
img {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.carousel_active {
|
|
border: 1px solid var(--themeColor);
|
|
border-radius: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.goods_detail_nav_left_btn {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 20px;
|
|
padding: 5px 10px;
|
|
border-radius: 14px;
|
|
border: 1px solid #dedede;
|
|
z-index: 10;
|
|
cursor: pointer;
|
|
.goods_detail_nav_left_btn_v {
|
|
padding-right: 5px;
|
|
border-right: 1px solid #aaa;
|
|
}
|
|
}
|
|
.active {
|
|
font-weight: 600;
|
|
color: black;
|
|
}
|
|
}
|
|
.goods_detail_nav_right {
|
|
width: 510px;
|
|
height: 320px;
|
|
margin: 15px 0;
|
|
.title {
|
|
width: 350px;
|
|
height: 28px;
|
|
font-size: 20px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #222222;
|
|
line-height: 28px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.price {
|
|
display: flex;
|
|
.packagePrice {
|
|
width: 100px;
|
|
height: 22px;
|
|
font-size: 16px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 600;
|
|
color: #ff1d1d;
|
|
line-height: 22px;
|
|
margin-right: 20px;
|
|
}
|
|
.originalPrice {
|
|
width: 100px;
|
|
height: 20px;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
line-height: 20px;
|
|
text-decoration: line-through;
|
|
margin-right: 20px;
|
|
}
|
|
.Integral {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin-right: 20px;
|
|
.integral_txt {
|
|
width: 110px;
|
|
height: 17px;
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #ff7d02;
|
|
line-height: 17px;
|
|
}
|
|
}
|
|
}
|
|
.package {
|
|
width: 300px;
|
|
height: 22px;
|
|
font-size: 16px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #585858;
|
|
line-height: 22px;
|
|
margin: 25px 0;
|
|
}
|
|
.address_Box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 400px;
|
|
margin: 25px 0;
|
|
}
|
|
.freight {
|
|
margin: 25px 0;
|
|
}
|
|
.order {
|
|
display: flex;
|
|
margin: 25px 0;
|
|
.jbq {
|
|
/deep/ .el-input-number {
|
|
width: 100px;
|
|
.el-input-number__decrease {
|
|
width: 26px;
|
|
height: 26px;
|
|
border: none;
|
|
border-radius: 16px;
|
|
background: #d8f6ff;
|
|
.el-icon-minus {
|
|
color: var(--themeColor);
|
|
font-weight: 900;
|
|
}
|
|
}
|
|
.el-input-number__increase {
|
|
width: 26px;
|
|
height: 26px;
|
|
border: none;
|
|
border-radius: 16px;
|
|
background: var(--themeColor);
|
|
.el-icon-plus {
|
|
color: #fff;
|
|
font-weight: 900;
|
|
}
|
|
}
|
|
.el-input {
|
|
.el-input__inner {
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.goods_detail_nav_right_btn {
|
|
margin-top: 40px;
|
|
.collectAct1 {
|
|
background: var(--themeColor);
|
|
color: #fff;
|
|
}
|
|
.collectAct2 {
|
|
background: #fff;
|
|
color: #000;
|
|
}
|
|
}
|
|
}
|
|
.time_Limit {
|
|
width: 120px;
|
|
height: 63px;
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 30px;
|
|
background: #ff1449;
|
|
border-radius: 0px 0px 6px 6px;
|
|
.title {
|
|
display: flex;
|
|
margin: 5px;
|
|
img {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin: 3px;
|
|
}
|
|
div {
|
|
font-size: 16px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
line-height: 22px;
|
|
}
|
|
}
|
|
.time {
|
|
color: #ffffff;
|
|
height: 22px;
|
|
line-height: 22px;
|
|
/deep/ .styleAll {
|
|
min-width: 30px;
|
|
height: 20px;
|
|
background: #ff7997;
|
|
border-radius: 5px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
.pintuan {
|
|
width: 101px;
|
|
height: 63px;
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 30px;
|
|
background: #ff7d02;
|
|
border-radius: 0px 0px 6px 6px;
|
|
.pintuanTitle {
|
|
display: flex;
|
|
margin: 5px;
|
|
img {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin: 3px;
|
|
}
|
|
div {
|
|
font-size: 16px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
line-height: 22px;
|
|
}
|
|
}
|
|
.pintuan_btn {
|
|
color: #ffffff;
|
|
width: 60px;
|
|
height: 22px;
|
|
line-height: 22px;
|
|
border-radius: 5px;
|
|
font-size: 12px;
|
|
margin: 0 auto;
|
|
background: #ffb268;
|
|
border-radius: 5px;
|
|
padding: 0 5px;
|
|
}
|
|
}
|
|
}
|
|
.goods_detail_option {
|
|
width: 1200px;
|
|
min-height: 610px;
|
|
background: #ffffff;
|
|
border-radius: 4px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
.goods_detail_option_box {
|
|
display: flex;
|
|
div {
|
|
margin: 10px 30px 10px 0px;
|
|
}
|
|
}
|
|
.goods_detail_option_text {
|
|
margin-bottom: 15px;
|
|
span {
|
|
margin-right: 20px;
|
|
height: 22px;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
line-height: 22px;
|
|
}
|
|
}
|
|
.goods_detail_option_banner {
|
|
width: 1200px;
|
|
min-height: 488px;
|
|
img {
|
|
margin: 10px;
|
|
width: 1200px;
|
|
height: 488px;
|
|
}
|
|
}
|
|
.goods_detail_evaluate {
|
|
display: flex;
|
|
div {
|
|
width: 60px;
|
|
height: 26px;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
color: #999999;
|
|
line-height: 26px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
margin-right: 20px;
|
|
}
|
|
.evaluate_active {
|
|
color: #222222;
|
|
border: 1px solid #999;
|
|
background: #ffffff;
|
|
border-radius: 13px;
|
|
border: 1px solid #e1e1e1;
|
|
}
|
|
}
|
|
.goods_detail_comment_Box {
|
|
display: flex;
|
|
margin-top: 25px;
|
|
padding: 5px;
|
|
.goods_detail_comment_head {
|
|
margin-right: 20px;
|
|
img {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.goods_detail_comment_content {
|
|
.content_name {
|
|
height: 14px;
|
|
font-size: 16px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
line-height: 14px;
|
|
margin-bottom: 15px;
|
|
}
|
|
.content_time {
|
|
height: 14px;
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
line-height: 14px;
|
|
margin-bottom: 15px;
|
|
}
|
|
.content_txt {
|
|
width: 1070px;
|
|
min-height: 20px;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
line-height: 20px;
|
|
}
|
|
.content_image {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: 1070px;
|
|
img {
|
|
width: 100px;
|
|
height: 100px;
|
|
margin: 15px;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.nothing {
|
|
padding-top: 100px;
|
|
padding-bottom: 150px;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
color: #969696;
|
|
|
|
img {
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|