|
|
@@ -0,0 +1,520 @@
|
|
|
+<template>
|
|
|
+ <div class="wrap">
|
|
|
+ <div class="reco-title">产品展示</div>
|
|
|
+ <div class="recommend-fragment clearfix">
|
|
|
+ <div v-if="!commodities || commodities.length === 0" class="empty-show">
|
|
|
+ <div class="empty">
|
|
|
+ <div class="empty-img">
|
|
|
+ <img src="/images/brandList/empty-cart.jpg">
|
|
|
+ </div>
|
|
|
+ <div class="empty-info">
|
|
|
+ <p class="grey f16"> 暂无展示产品</p>
|
|
|
+ <i class="iconfont" v-if="emptyShow === false"></i> <a v-if="emptyShow === false" href="/">返回首页</a>
|
|
|
+ <img v-if="emptyShow === true" src="/images/brandList/upload.png"> <a v-if="emptyShow === true" href="/vendor#/store/maintain" target="_blank">马上去上传</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="commodities.length>0">
|
|
|
+ <div v-if="commodities.length<=4">
|
|
|
+ <ul class="recommend-list clearfix">
|
|
|
+ <li v-for="commodity in commodities.slice(0,4)" class="big">
|
|
|
+ <a :href="commodity.batchCode ? '/store/productDetail/'+ commodity.batchCode : '#'" class="href">
|
|
|
+ <div class="img">
|
|
|
+ <img :src="commodity.comImg.startsWith('static')?'/'+commodity.comImg:commodity.comImg"/>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <p>{{commodity.comCode | comCodeFilter}}</p>
|
|
|
+ <!-- <p class="color666" v-text="commodity.brandNameCn">PANFAEFQ</p>-->
|
|
|
+ <p class="price" v-if="commodity.minPriceRMB">¥ {{commodity.minPriceRMB | currency}}</p>
|
|
|
+ <!-- <p class="price" v-if="!commodity.minPriceRMB">$ {{commodity.minPriceUSD || 0}}</p>-->
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-swiper:mySwiper="swiperOption" v-if="commodities && commodities.length>3">
|
|
|
+ <div class="swiper-wrapper">
|
|
|
+ <div class="swiper-slide" v-if="commodities.length>0">
|
|
|
+ <ul class="recommend-list clearfix">
|
|
|
+ <li v-for="commodity in commodities.slice(0,4)" class="big">
|
|
|
+ <a :href="commodity.batchCode ? '/store/productDetail/'+ commodity.batchCode : '#'" class="href">
|
|
|
+ <div class="img">
|
|
|
+ <img :src="commodity.comImg.startsWith('static')?'/'+commodity.comImg:commodity.comImg"/>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <p>{{commodity.comCode | comCodeFilter}}</p>
|
|
|
+ <!-- <p class="color666" v-text="commodity.brandNameCn">PANFAEFQ</p>-->
|
|
|
+ <p class="price" v-if="commodity.minPriceRMB">¥ {{commodity.minPriceRMB | currency}}</p>
|
|
|
+ <!-- <p class="price" v-if="!commodity.minPriceRMB">$ {{commodity.minPriceUSD || 0}}</p>-->
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-slide" v-if="commodities.length>4">
|
|
|
+ <ul class="recommend-list clearfix">
|
|
|
+ <li v-for="commodity in commodities.slice(4,7)" class="big">
|
|
|
+ <a :href="commodity.batchCode ? '/store/productDetail/'+ commodity.batchCode : '#'" class="href">
|
|
|
+ <div class="img">
|
|
|
+ <img :src="commodity.comImg.startsWith('static')?'/'+commodity.comImg:commodity.comImg"/>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <p>{{commodity.comCode | comCodeFilter}}</p>
|
|
|
+ <!-- <p class="color666" v-text="commodity.brandNameCn">PANFAEFQ</p>-->
|
|
|
+ <p class="price" v-if="commodity.minPriceRMB">¥ {{commodity.minPriceRMB | currency}}</p>
|
|
|
+ <!-- <p class="price" v-if="!commodity.minPriceRMB">$ {{commodity.minPriceUSD || 0}}</p>-->
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-slide" v-if="commodities.length>8">
|
|
|
+ <ul class="recommend-list clearfix">
|
|
|
+ <li v-for="commodity in commodities.slice(8,11)" class="big">
|
|
|
+ <a :href="commodity.batchCode ? '/store/productDetail/'+ commodity.batchCode : '#'" class="href">
|
|
|
+ <div class="img">
|
|
|
+ <img :src="commodity.comImg.startsWith('static')?'/'+commodity.comImg:commodity.comImg"/>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <p>{{commodity.comCode | comCodeFilter}}</p>
|
|
|
+ <!-- <p class="color666" v-text="commodity.brandNameCn">PANFAEFQ</p>-->
|
|
|
+ <p class="price" v-if="commodity.minPriceRMB">¥ {{commodity.minPriceRMB | currency}}</p>
|
|
|
+ <!-- <p class="price" v-if="!commodity.minPriceRMB">$ {{commodity.minPriceUSD || 0}}</p>-->
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-slide" v-if="commodities.length>12">
|
|
|
+ <ul class="recommend-list clearfix">
|
|
|
+ <li v-for="commodity in commodities.slice(12,15)" class="big">
|
|
|
+ <a :href="commodity.batchCode ? '/store/productDetail/'+ commodity.batchCode : '#'" class="href">
|
|
|
+ <div class="img">
|
|
|
+ <img :src="commodity.comImg.startsWith('static')?'/'+commodity.comImg:commodity.comImg"/>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <p>{{commodity.comCode | comCodeFilter}}</p>
|
|
|
+ <!-- <p class="color666" v-text="commodity.brandNameCn">PANFAEFQ</p>-->
|
|
|
+ <p class="price" v-if="commodity.minPriceRMB">¥ {{commodity.minPriceRMB | currency}}</p>
|
|
|
+ <!-- <p class="price" v-if="!commodity.minPriceRMB">$ {{commodity.minPriceUSD || 0}}</p>-->
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-pagination swiper-pagination-bullets"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import Buy from '~components/common/buyOrCar/buyComponent.vue'
|
|
|
+ import NuxtLink from '../../../.nuxt/components/nuxt-link'
|
|
|
+ export default {
|
|
|
+ name: 'recommend-product',
|
|
|
+ components: {
|
|
|
+ NuxtLink,
|
|
|
+ Buy
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ commodities () {
|
|
|
+ return this.$store.state.shop.recommend.products.data
|
|
|
+ },
|
|
|
+ storeInfo () {
|
|
|
+ return this.$store.state.shop.storeInfo.store.data
|
|
|
+ },
|
|
|
+ isConsignment () {
|
|
|
+ return this.storeInfo.type === 'CONSIGNMENT'
|
|
|
+ },
|
|
|
+ user() {
|
|
|
+ return this.$store.state.option.user
|
|
|
+ },
|
|
|
+ storeStatus () {
|
|
|
+ return this.$store.state.option.storeStatus.data
|
|
|
+ },
|
|
|
+ emptyShow () {
|
|
|
+ let loggedStatus = false
|
|
|
+ if (this.user.logged && this.user.data.enterprise.uu) {
|
|
|
+ if (this.storeStatus.uuid === this.storeInfo.uuid) {
|
|
|
+ loggedStatus = true
|
|
|
+ } else {
|
|
|
+ loggedStatus = false
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ loggedStatus = false
|
|
|
+ }
|
|
|
+ return loggedStatus
|
|
|
+ },
|
|
|
+ // 产品推荐轮播
|
|
|
+ swiperOption () {
|
|
|
+ return {
|
|
|
+ autoplay: 5000,
|
|
|
+ initialSlide: 0,
|
|
|
+ loop: true,
|
|
|
+ effect: this.effect,
|
|
|
+ lazyLoading: true,
|
|
|
+ // 解决点击分页器后图片就不能轮播的问题
|
|
|
+ autoplayDisableOnInteraction: false,
|
|
|
+ pagination: '.swiper-pagination',
|
|
|
+ paginationClickable: true,
|
|
|
+ paginationElement: 'li'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ comCodeFilter: function (title) {
|
|
|
+ if (title === '') {
|
|
|
+ return title
|
|
|
+ }
|
|
|
+ let len = 0
|
|
|
+ let index = 0
|
|
|
+ for (let i = 0; i < title.length; i++) {
|
|
|
+ if (index === 0 && title.charAt(i).charCodeAt(0) > 255) {
|
|
|
+ len = len + 2
|
|
|
+ } else {
|
|
|
+ len++
|
|
|
+ }
|
|
|
+ if (len > 18) {
|
|
|
+ index = i
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (index > 0) {
|
|
|
+ return title.substring(0, index) + '...'
|
|
|
+ } else {
|
|
|
+ return title
|
|
|
+ }
|
|
|
+ },
|
|
|
+ currency: function (num) {
|
|
|
+ if (typeof num === 'number') {
|
|
|
+ if (num <= 0.000001) {
|
|
|
+ num = 0.000001
|
|
|
+ } else {
|
|
|
+ if (num.toString().indexOf('.') === -1) {
|
|
|
+ num += '.00'
|
|
|
+ } else {
|
|
|
+ let inputStr = num.toString()
|
|
|
+ let arr = inputStr.split('.')
|
|
|
+ let floatNum = arr[1]
|
|
|
+ if (floatNum.length > 6) {
|
|
|
+ num = inputStr.substring(0, arr[0].length + 7)
|
|
|
+ if (Number(floatNum.charAt(6)) > 4) {
|
|
|
+ num = (Number(num) * 1000000 + 1) / 1000000
|
|
|
+ }
|
|
|
+ } else if (floatNum.length === 1) {
|
|
|
+ num = num + '0'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return num
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ enidfilter: function (str) {
|
|
|
+ if (str) {
|
|
|
+ let encryptStr = '' // 最终返回的加密后的字符串
|
|
|
+ // 产生三位随机数
|
|
|
+ let num = ''
|
|
|
+ for (let i = 0; i < 3; i++) {
|
|
|
+ num += Math.floor(Math.random() * 10)
|
|
|
+ }
|
|
|
+ encryptStr += num // 产生3位随机数
|
|
|
+
|
|
|
+ // 16位加密
|
|
|
+ let tempspit = ''
|
|
|
+ let strspit = str.toString().toLowerCase()
|
|
|
+ if (strspit.match(/^[-+]?\d*$/) === null) { // 非整数字符,对每一个字符都转换成16进制,然后拼接
|
|
|
+ /**
|
|
|
+ * Unicode汉字、英文字母、数字的unicode范围
|
|
|
+ *汉字:[0x4e00,0x9fa5](或十进制[19968,40869])
|
|
|
+ *数字:[0x30,0x39](或十进制[48, 57])
|
|
|
+ *小写字母:[0x61,0x7a](或十进制[97, 122])
|
|
|
+ *大写字母:[0x41,0x5a](或十进制[65, 90]
|
|
|
+ * 'a'的Unicode编码:'a',charCodeAt()的值是97
|
|
|
+ * '码'的Unicode编码:'\u7801', new String('码').charCodeAt()的值是30721,30721的16进制表示是7801
|
|
|
+ */
|
|
|
+ let s = strspit.split('')
|
|
|
+ for (let i = 0; i < s.length; i++) {
|
|
|
+ s[i] = s[i].charCodeAt() // 先转换成Unicode编码
|
|
|
+ s[i] = s[i].toString(16)
|
|
|
+ // 因为在服务器是每两位当做一个字符进行解析的,所以这里每个字符的Unicode编码范围必须在0——255之间。数字和大小写满足该要求,特殊字符则不一定,如果后续有特殊字符的要求,需要重写编码器和解码器
|
|
|
+ if (s[i].length === 1) {
|
|
|
+ s[i] = '0' + s[i]
|
|
|
+ }
|
|
|
+ tempspit = tempspit + s[i]
|
|
|
+ }
|
|
|
+ tempspit = tempspit + '{' + 1 // 1代表字符
|
|
|
+ } else { // 数字直接转换成16进制
|
|
|
+ strspit = parseInt(strspit)
|
|
|
+ .toString(16)
|
|
|
+ tempspit = strspit + '{' + 0 // 0代表纯数字
|
|
|
+ }
|
|
|
+
|
|
|
+ let temp = tempspit.split('{') // 对要加密的字符转换成16进制
|
|
|
+ let numLength = temp[0].length // 转换后的字符长度
|
|
|
+ numLength = numLength.toString(16) // 字符长度换算成16进制
|
|
|
+ if (numLength.length === 1) { // 如果是1,补一个0
|
|
|
+ numLength = '0' + numLength
|
|
|
+ } else if (numLength.length > 3) { // 转换后的16进制字符长度如果大于2位数,则返回,不支持
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ encryptStr += numLength
|
|
|
+ if (temp[1] === '0') {
|
|
|
+ encryptStr += 0
|
|
|
+ } else if (temp[1] === '1') {
|
|
|
+ encryptStr += 1
|
|
|
+ }
|
|
|
+ encryptStr += temp[0]
|
|
|
+ if (encryptStr.length < 20) { // 如果小于20位,补上随机数
|
|
|
+ // 产生三位随机数
|
|
|
+ let numtwo = ''
|
|
|
+ for (let i = 0; i < 20 - encryptStr.length; i++) {
|
|
|
+ numtwo += Math.floor(Math.random() * 10)
|
|
|
+ }
|
|
|
+ let ran = numtwo // 产生3位随机数
|
|
|
+ encryptStr += ran
|
|
|
+ }
|
|
|
+ return encryptStr
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .wrap {
|
|
|
+ background: #ece9ec;
|
|
|
+ padding-top: 7px;
|
|
|
+ width: 100%;
|
|
|
+ .reco-title {
|
|
|
+ border-bottom: 1px solid #2496f1;
|
|
|
+ width: 218px;
|
|
|
+ height: 34px;
|
|
|
+ line-height: 34px;
|
|
|
+ color: #fff;
|
|
|
+ background: #2496f1;
|
|
|
+ font-size: 18px;
|
|
|
+ text-align: center;
|
|
|
+ border-top-left-radius: 3px;
|
|
|
+ border-top-right-radius: 3px;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .recommend-fragment {
|
|
|
+ background: #fff;
|
|
|
+ .empty-show{
|
|
|
+ height: 381px;
|
|
|
+ padding-top: 140px;
|
|
|
+ &:hover{
|
|
|
+ box-shadow: 0px 0px 0px transparent;
|
|
|
+ }
|
|
|
+ .empty{
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 181px;
|
|
|
+ .empty-img{
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .empty-info{
|
|
|
+ float: left;
|
|
|
+ margin: 5px 0px 0px 20px;
|
|
|
+ .grey{
|
|
|
+ color: #999;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ i{
|
|
|
+ color: #5078cb;
|
|
|
+ }
|
|
|
+ a{
|
|
|
+ font-size: 14px;
|
|
|
+ color: #5078cb;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .recommend-fragment ul{
|
|
|
+ width: 100%;
|
|
|
+ background: #fff;
|
|
|
+ /* display: inline-block;*/
|
|
|
+ -webkit-padding-start: 0;
|
|
|
+ border-radius: 5px;
|
|
|
+ /*padding-left: 2px;*/
|
|
|
+ margin: 10px 0;
|
|
|
+ padding: 0 15px;
|
|
|
+ }
|
|
|
+ .recommend-fragment ul li
|
|
|
+ .img{
|
|
|
+ height: 42px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 42px;
|
|
|
+ img{
|
|
|
+ max-width: 63px;
|
|
|
+ max-height: 42px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .recommend-fragment ul li .content{
|
|
|
+ width: 100%;
|
|
|
+ margin: 0 auto;
|
|
|
+ font-size: 12px;
|
|
|
+ p{
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ display: inline-block;
|
|
|
+ line-height: 22px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ margin: 5px 0;
|
|
|
+ padding-left: 10px;
|
|
|
+ color: #666;
|
|
|
+ &.price{
|
|
|
+ color: #ff002e;
|
|
|
+ margin-top: -3px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .recommend-fragment ul li .enter-store {
|
|
|
+ position: absolute;
|
|
|
+ top: 178px;
|
|
|
+ width: 100%;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ .recommend-fragment ul li.big .enter-store a {
|
|
|
+ width: 74px;
|
|
|
+ height: 24px;
|
|
|
+ display: inline-block;
|
|
|
+ line-height: 24px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 13px;
|
|
|
+ margin-left: 14px;
|
|
|
+ border-radius: 3px;
|
|
|
+ &:first-child {
|
|
|
+ background-color: #fff;
|
|
|
+ border: 1px solid #3b7cf4;
|
|
|
+ color: #3b7cf4;
|
|
|
+ }
|
|
|
+ &:last-child {
|
|
|
+ background-color: #ffa422;
|
|
|
+ border: 1px solid #ffa422;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ /*&:visited{
|
|
|
+ .enter-store {
|
|
|
+ top: 140px;
|
|
|
+ left: 0px;
|
|
|
+ }
|
|
|
+ }*/
|
|
|
+ }
|
|
|
+ .recommend-fragment ul li.big {
|
|
|
+ float: left;
|
|
|
+ width: 190px;
|
|
|
+ height: 125px;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 2px 3px 0px 0px;
|
|
|
+ &:nth-child(5n){
|
|
|
+ margin: 2px 0px 0px 0px;
|
|
|
+ }
|
|
|
+ &:hover{
|
|
|
+ /*box-shadow: 2px 0px 1px #d9d9d9, -2px 0px 1px #d9d9d9, 0px 2px 1px #d9d9d9, 0px -2px 1px #d9d9d9;*/
|
|
|
+ .enter-store {
|
|
|
+ top: 132px;
|
|
|
+ left: 0px;
|
|
|
+ transition: all .3s linear;
|
|
|
+ }
|
|
|
+ .img, .content{
|
|
|
+ transform:translate(0px,-10px);
|
|
|
+ -ms-transform:translate(0px,-10px); /* IE 9 */
|
|
|
+ -webkit-transform:translate(0px,-10px); /* Safari and Chrome */
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ /*.recommend-fragment ul li.small .enter-store a {
|
|
|
+ width: 74px;
|
|
|
+ height: 24px;
|
|
|
+ display: inline-block;
|
|
|
+ line-height: 22px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 12px;
|
|
|
+ margin-left: 11px;
|
|
|
+ border-radius: 3px;
|
|
|
+ &:first-child {
|
|
|
+ background-color: #fff;
|
|
|
+ border: solid 1px #3b7cf4;
|
|
|
+ color: #3c7df5;
|
|
|
+ }
|
|
|
+ &:last-child {
|
|
|
+ background-color: #ffa422;
|
|
|
+ border: 1px solid #ffa422;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .recommend-fragment ul li.small {
|
|
|
+ float: left;
|
|
|
+ width: 180px;
|
|
|
+ height: 174px;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 2px 8px 0px 0px;
|
|
|
+ &:nth-child(5n){
|
|
|
+ margin: 2px 0px 0px 0px;
|
|
|
+ }
|
|
|
+ &:hover, &:focus, &:active &:visited{
|
|
|
+ box-shadow: 2px 0px 1px #d9d9d9, -2px 0px 1px #d9d9d9, 0px 2px 1px #d9d9d9, 0px -2px 1px #d9d9d9;
|
|
|
+ .enter-store {
|
|
|
+ top: 140px;
|
|
|
+ left: 0px;
|
|
|
+ transition: all .5s;
|
|
|
+ }
|
|
|
+ .img, .content{
|
|
|
+ transform:translate(0px,-10px);
|
|
|
+ -ms-transform:translate(0px,-10px); !* IE 9 *!
|
|
|
+ -webkit-transform:translate(0px,-10px); !* Safari and Chrome *!
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }*/
|
|
|
+ .recommend-fragment ul li.empty-show {
|
|
|
+ width: 100%;
|
|
|
+ height: 356px;
|
|
|
+ padding-top: 150px;
|
|
|
+ &:hover{
|
|
|
+ box-shadow: 0px 0px 0px transparent;
|
|
|
+ }
|
|
|
+ .empty{
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 181px;
|
|
|
+ .empty-img{
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .empty-info{
|
|
|
+ float: left;
|
|
|
+ margin: 5px 0px 0px 20px;
|
|
|
+ .grey{
|
|
|
+ color: #999;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ i{
|
|
|
+ color: #5078cb;
|
|
|
+ }
|
|
|
+ a{
|
|
|
+ font-size: 14px;
|
|
|
+ color: #5078cb;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .shadow {
|
|
|
+ width: 1190px;
|
|
|
+ margin: 0 auto;
|
|
|
+ position: relative;
|
|
|
+ img {
|
|
|
+ position: absolute;
|
|
|
+ top: -12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|