|
|
@@ -1,4 +1,4 @@
|
|
|
-<template>
|
|
|
+<!--<template>
|
|
|
<div id="goods-list-fragment">
|
|
|
<div class="container" style="width: 1190px; padding: 0;">
|
|
|
<div class="title-area">
|
|
|
@@ -9,7 +9,7 @@
|
|
|
<el-tree :data="kinds" :props="defaultProps" :default-expanded-keys="[0]" node-key="id" accordion :highlight-current="true" @current-change="handlerCurrentNode" @node-collapse="onNodeCollapse"></el-tree>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <!-- 产品列表 -->
|
|
|
+ <!– 产品列表 –>
|
|
|
<div class="goods-area">
|
|
|
<div class="row" style="margin: 0;width: 970px;">
|
|
|
<div class="col-md-3 btn-group btn-group-sm" style="padding: 0;">
|
|
|
@@ -30,17 +30,17 @@
|
|
|
|
|
|
</div>
|
|
|
|
|
|
- <!-- 列表展示 -->
|
|
|
+ <!– 列表展示 –>
|
|
|
<table class="goodslist" style="width: 970px">
|
|
|
<thead>
|
|
|
<tr style="height: 40px;">
|
|
|
- <!--<th width="90"></th>-->
|
|
|
+ <!–<th width="90"></th>–>
|
|
|
<th width="140">品牌/类目/型号/规格</th>
|
|
|
<th width="100">包装/生产日期</th>
|
|
|
<th width="110">库存</th>
|
|
|
<th width="90">梯度/pcs</th>
|
|
|
- <!--<th width="90">香港交货<span style="font-size: 12px;">($)</span></th>-->
|
|
|
- <!--<th width="100">大陆交货<span style="font-size: 12px;">(￥)</span></th>-->
|
|
|
+ <!–<th width="90">香港交货<span style="font-size: 12px;">($)</span></th>–>
|
|
|
+ <!–<th width="100">大陆交货<span style="font-size: 12px;">(￥)</span></th>–>
|
|
|
<th width="100">单价</th>
|
|
|
<th width="100">交期(天)</th>
|
|
|
<th width="90">规格书</th>
|
|
|
@@ -77,33 +77,33 @@
|
|
|
<div class="from" v-if="commodity.reserve && commodity.reserve>0 || commodity.status === 602">
|
|
|
最小起订量：<span v-if="commodity.minBuyQty" v-text="commodity.minBuyQty">300</span>
|
|
|
</div>
|
|
|
- <!--<div class="multiple">
|
|
|
+ <!–<div class="multiple">
|
|
|
倍数：<span>1</span>
|
|
|
- </div>-->
|
|
|
+ </div>–>
|
|
|
<div class="can-div-sell" v-if="(commodity.reserve || commodity.status === 602) && commodity.breakUp">可拆卖</div>
|
|
|
</td>
|
|
|
<td>
|
|
|
<div v-for="price in commodity.prices" v-text="price.start + '+'"></div>
|
|
|
</td>
|
|
|
- <!--<td>-->
|
|
|
- <!--<div v-show="commodity.currencyName.indexOf('USD')==-1 || !commodity.prices">-->
|
|
|
- <!--<span>—</span>-->
|
|
|
- <!--</div>-->
|
|
|
- <!--<div v-for="price in commodity.prices">{{price.uSDPrice | currency}}</div>-->
|
|
|
- <!--</td>-->
|
|
|
- <!--<td>-->
|
|
|
- <!--<div v-show="commodity.currencyName.indexOf('RMB')==-1 || !commodity.prices">-->
|
|
|
- <!--<span>—</span>-->
|
|
|
- <!--</div>-->
|
|
|
- <!--<div v-for="price in commodity.prices" >{{price.rMBPrice | currency}}</div>-->
|
|
|
- <!--</td>-->
|
|
|
+ <!–<td>–>
|
|
|
+ <!–<div v-show="commodity.currencyName.indexOf('USD')==-1 || !commodity.prices">–>
|
|
|
+ <!–<span>—</span>–>
|
|
|
+ <!–</div>–>
|
|
|
+ <!–<div v-for="price in commodity.prices">{{price.uSDPrice | currency}}</div>–>
|
|
|
+ <!–</td>–>
|
|
|
+ <!–<td>–>
|
|
|
+ <!–<div v-show="commodity.currencyName.indexOf('RMB')==-1 || !commodity.prices">–>
|
|
|
+ <!–<span>—</span>–>
|
|
|
+ <!–</div>–>
|
|
|
+ <!–<div v-for="price in commodity.prices" >{{price.rMBPrice | currency}}</div>–>
|
|
|
+ <!–</td>–>
|
|
|
<td>
|
|
|
<div v-for="price in commodity.prices">{{commodity.currencyName.indexOf('USD')!=-1?'$':'￥'}}{{commodity.currencyName.indexOf('USD')!=-1?price.uSDPrice:price.rMBPrice | currency}}</div>
|
|
|
<div v-if="commodity.currencyName.indexOf('RMB')==-1 || !commodity.prices && commodity.currencyName.indexOf('USD')==-1 || !commodity.prices"></div>
|
|
|
</td>
|
|
|
<td>
|
|
|
<div v-if="commodity.b2cMinDelivery">
|
|
|
- <!--{{commodity.b2cMinDelivery || 0}}-{{commodity.b2cMaxDelivery || 0}}天-->
|
|
|
+ <!–{{commodity.b2cMinDelivery || 0}}-{{commodity.b2cMaxDelivery || 0}}天–>
|
|
|
<span v-if="commodity.b2cMinDelivery != commodity.b2cMaxDelivery" v-text="commodity.b2cMinDelivery + '-' + commodity.b2cMaxDelivery"></span>
|
|
|
<span v-if="commodity.b2cMinDelivery == commodity.b2cMaxDelivery" v-text="commodity.b2cMinDelivery"></span>
|
|
|
</div>
|
|
|
@@ -405,7 +405,7 @@ export default {
|
|
|
.category-content .el-tree{
|
|
|
border: none;
|
|
|
}
|
|
|
- .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content,.el-tree-node:hover{
|
|
|
+ .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content,.el-tree-node:hover{
|
|
|
background: none !important;
|
|
|
}
|
|
|
.el-tree-node__content:hover{
|
|
|
@@ -748,4 +748,685 @@ export default {
|
|
|
#goods-list-fragment .goods-area .page-wrap {
|
|
|
margin-top: 18px;
|
|
|
}
|
|
|
+</style>-->
|
|
|
+<template>
|
|
|
+ <div id="goods-list-fragment">
|
|
|
+ <div class="container">
|
|
|
+ <div style="margin-bottom: 15px;width: 100%;">
|
|
|
+ <div class="input-group">
|
|
|
+ <input type="search" class="form-control" id="search_input" title="code" placeholder="型号/品牌"
|
|
|
+ v-model="searchCode" @search="goodsSearch(searchCode)"/>
|
|
|
+ <span class="input-group-btn">
|
|
|
+ <button type="button" class="btn" id="search_btn" @click="goodsSearch(searchCode)"> 搜 索 </button>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="title-area">
|
|
|
+ <div class="category-title">
|
|
|
+ <span style="line-height: 34px;">产品分类</span>
|
|
|
+ </div>
|
|
|
+ <div class="category-content">
|
|
|
+ <el-tree v-if="kinds[0].children && kinds[0].children.length" :data="kinds" :props="defaultProps" accordion :highlight-current="true" @current-change="handlerCurrentNode" :default-expanded-keys="[0]" node-key="level">
|
|
|
+ </el-tree>
|
|
|
+ <span class="empty" v-if="!kinds[0].children || !kinds[0].children.length">暂无数据</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 产品列表 -->
|
|
|
+ <div class="goods-area">
|
|
|
+ <!-- 列表展示 -->
|
|
|
+ <table class="goodslist" style="width: 936px;background:#fff;" >
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th width="172"><div>品牌/型号</div></th>
|
|
|
+ <th width="140"><div>包装/生产日期</div></th>
|
|
|
+ <th width="100"><div>库存</div></th>
|
|
|
+ <!-- <th width="90">数量</th>
|
|
|
+ <th width="90">香港交货<span style="font-size: 12px;">($)</span></th>
|
|
|
+ <th width="100">大陆交货<span style="font-size: 12px;">(￥)</span></th>-->
|
|
|
+ <th width="216"><div>价格梯度(PCS)</div></th>
|
|
|
+ <th width="109"><div>交期(天)</div></th>
|
|
|
+ <th width="90"><div>规格书</div></th>
|
|
|
+ <th width="95"><div>操作</div></th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody id="goodslist-content">
|
|
|
+ <tr v-for="commodity in commodities.content" @click="goBatchDetail(commodity.batchCode)">
|
|
|
+ <td class="brand-code">
|
|
|
+ <img class="sellout-store-commodity" v-if="commodity.status === 602" src="/images/search/sellout-search.png" alt="">
|
|
|
+ <img class="specific-price-tag" v-if="isSpecificPriceTag(commodity.tag) && isConsignment" src="/images/floor/specificPrice-store.png" alt="">
|
|
|
+ <div class="brand" v-if="commodity.brandNameEn || commodity.brandEn">
|
|
|
+ <a v-if="commodity.brandNameEn && commodity.branduuid" @click="goBrandDetail('/product/brand/' + commodity.branduuid, $event)" v-text="commodity.brandNameEn"></a>
|
|
|
+ <span v-if="commodity.brandNameEn && !commodity.branduuid" v-text="commodity.brandNameEn"></span>
|
|
|
+ <span v-if="commodity.brandEn">{{commodity.brandEn}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="brand" v-if="!commodity.brandNameEn && !commodity.brandEn && commodity.code">—</div>
|
|
|
+ <div class="code" v-if="commodity.code" v-text="commodity.code"></div>
|
|
|
+ <div class="code" v-if="!commodity.code && commodity.brandNameEn ">—</div>
|
|
|
+ <div class="brand" v-if="!commodity.brandNameEn && !commodity.brandEn && !commodity.code">—</div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="package" v-if="commodity.packaging" v-text="commodity.packaging"></div>
|
|
|
+ <div class="package" v-if="!commodity.packaging && !commodity.produceDate">—</div>
|
|
|
+ <div class="date" v-if='commodity.produceDate' v-text="commodity.produceDate">2016-12-01</div>
|
|
|
+ </td>
|
|
|
+ <td style="text-align: left;vertical-align: middle;">
|
|
|
+ <div class="goods" v-if="commodity.reserve">
|
|
|
+ 库存：<span v-text="commodity.reserve">31500</span>
|
|
|
+ </div>
|
|
|
+ <div v-if="!commodity.reserve" style="text-align: center;margin-left: 0;"><span>—</span></div>
|
|
|
+ <div class="from" v-if="commodity.reserve && commodity.reserve>0">
|
|
|
+ 起拍：<span v-if="commodity.minBuyQty" v-text="commodity.minBuyQty">300</span>
|
|
|
+ </div>
|
|
|
+ <!--<div class="multiple">
|
|
|
+ 倍数：<span>1</span>
|
|
|
+ </div>-->
|
|
|
+ <div class="can-div-sell" v-if="commodity.reserve" v-text="commodity.breakUp?'可拆卖':'不可拆卖'"></div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="amount">
|
|
|
+ <div v-for="price in commodity.prices" v-text="price.start + '+'"></div>
|
|
|
+ </div>
|
|
|
+ <!--<div v-show="commodity.currencyName.indexOf('USD')==-1 || !commodity.prices">
|
|
|
+ <span>—</span>
|
|
|
+ </div>
|
|
|
+ <div v-for="price in commodity.prices">{{price.uSDPrice | currency}}</div>-->
|
|
|
+ <div class="price">
|
|
|
+ <div v-show="commodity.currencyName.indexOf('RMB')==-1 || !commodity.prices">
|
|
|
+ <span>—</span>
|
|
|
+ </div>
|
|
|
+ <div v-for="price in commodity.prices">￥{{price.rMBPrice | currency}}</div>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div v-if="commodity.b2cMinDelivery">
|
|
|
+ <!--{{commodity.b2cMinDelivery || 0}}-{{commodity.b2cMaxDelivery || 0}}天-->
|
|
|
+ <span v-if="commodity.b2cMinDelivery != commodity.b2cMaxDelivery" v-text="commodity.b2cMinDelivery + '-' + commodity.b2cMaxDelivery"></span>
|
|
|
+ <span v-if="commodity.b2cMinDelivery == commodity.b2cMaxDelivery" v-text="commodity.b2cMinDelivery"></span>
|
|
|
+ </div>
|
|
|
+ <div v-if="!commodity.b2cMinDelivery"><span>—</span></div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div v-if="commodity.attach">
|
|
|
+ <a @click="goAttach(commodity.attach, $event)" target="_blank"><img src="/images/store/common/pdf.png" alt=""/></a>
|
|
|
+ </div>
|
|
|
+ <div v-if="!commodity.attach">—</div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <buy :item="commodity"></buy>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr v-if="!commodities.content || commodities.content.length == 0">
|
|
|
+ <td colspan="10">
|
|
|
+ <div class="text-center">
|
|
|
+ <div class="col-xs-offset-3 col-xs-2">
|
|
|
+ <img src="/images/brandList/empty-cart.jpg">
|
|
|
+ </div>
|
|
|
+ <div class="col-xs-4 txt-info">
|
|
|
+ <p class="grey f16">暂无器件信息</p>
|
|
|
+ <i class="iconfont"></i> <a href="/">返回首页</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ <div style="float: right;">
|
|
|
+ <page :total="commodities.totalElements" :page-size="pageParams.count"
|
|
|
+ :current="pageParams.page" @childEvent="handleCurrentChange"></page>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ function getAllLeafIds (kind) {
|
|
|
+ if (!kind) {
|
|
|
+ return null
|
|
|
+ }
|
|
|
+ if (kind.isLeaf === 1) {
|
|
|
+ return kind.id
|
|
|
+ } else {
|
|
|
+ if (!kind.children || kind.children.length === 0) {
|
|
|
+ return null
|
|
|
+ }
|
|
|
+ let ids = []
|
|
|
+ for (let i = 0; i < kind.children.length; i++) {
|
|
|
+ ids.push(getAllLeafIds(kind.children[i]))
|
|
|
+ }
|
|
|
+ return ids.join(',')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ import Buy from '~components/common/buyOrCar/buyComponent.vue'
|
|
|
+ import Page from '~components/common/page/pageComponent.vue'
|
|
|
+ export default {
|
|
|
+ name: 'commodity-list',
|
|
|
+ props: ['kinds'],
|
|
|
+ components: {
|
|
|
+ Buy,
|
|
|
+ Page
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ defaultProps: {
|
|
|
+ children: 'children',
|
|
|
+ label: 'nameCn'
|
|
|
+ },
|
|
|
+ pageParams: {
|
|
|
+ page: 1,
|
|
|
+ count: 6
|
|
|
+ },
|
|
|
+ searchCode: '',
|
|
|
+ parentKindId: 0,
|
|
|
+ ids: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ commodities () {
|
|
|
+ return this.$store.state.shop.storeInfo.storeCommodity.data
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ this.kinds.forEach((item) => {
|
|
|
+ this.KindsNameChange(item)
|
|
|
+ })
|
|
|
+// alert(JSON.stringify(this.kinds))
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ KindsNameChange: function (obj) {
|
|
|
+// obj.nameCn += obj.level
|
|
|
+ document.getElementsByClassName('el-tree-node__content').innerHTML = ('<span>1</span>')
|
|
|
+// console.log(obj.nameCn)
|
|
|
+ if (obj.children && obj.children.length) {
|
|
|
+ console.log(obj.children)
|
|
|
+ obj.children.forEach((item) => {
|
|
|
+ this.KindsNameChange(item)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ goAttach: function (url, event) {
|
|
|
+ event.stopPropagation()
|
|
|
+ if (this.user.logged) {
|
|
|
+ if (url && url !== '1') {
|
|
|
+ window.open(url)
|
|
|
+ } else {
|
|
|
+ this.$message.error('规格书地址错误')
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.$http.get('/login/page', {params: {returnUrl: window.location.href}}).then(response => {
|
|
|
+ if (response.data) {
|
|
|
+ window.location.href = response.data.content + '&baseUrl=' + encodeURIComponent(window.location.protocol + '//' + window.location.host + response.data.baseUrl)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handlerCurrentNode (data, node) {
|
|
|
+ this.searchCode = ''
|
|
|
+ if (this.parentKindId === data.id) {
|
|
|
+ this.parentKindId = 0
|
|
|
+ this.ids = null
|
|
|
+ } else {
|
|
|
+ if (data.level === 1) {
|
|
|
+ this.parentKindId = data.id
|
|
|
+ }
|
|
|
+ this.ids = getAllLeafIds(data)
|
|
|
+ }
|
|
|
+ this.pageParams.page = 1
|
|
|
+
|
|
|
+ this.pageCommodity(this.pageParams, this.ids)
|
|
|
+ },
|
|
|
+ goodsSearch (keyword) {
|
|
|
+ this.pageParams.page = 1
|
|
|
+ this.pageCommodity(this.pageParams, this.ids, keyword)
|
|
|
+ },
|
|
|
+ async pageCommodity (pageParams, kindId, keyword) {
|
|
|
+// pageCommodity (pageParams, kindId, keyword) {
|
|
|
+ let params = { storeid: this.$route.params.uuid, origin: 'store', kindUuid: kindId, code: keyword }
|
|
|
+ params.page = pageParams.page
|
|
|
+ params.count = pageParams.count
|
|
|
+
|
|
|
+ try {
|
|
|
+ let { data } = await this.$http.get('/api/commodity/commodities', { params })
|
|
|
+ this.$store.commit('shop/storeInfo/GET_STORE_COMMODITY_SUCCESS', data)
|
|
|
+ } catch (err) {
|
|
|
+ this.$store.commit('shop/storeInfo/GET_STORE_COMMODITY_FAILURE', err)
|
|
|
+ }
|
|
|
+// this.$http.get('/api/commodity/commodities', { params }).then(response => {
|
|
|
+// this.$store.commit('shop/storeInfo/GET_STORE_COMMODITY_SUCCESS', response)
|
|
|
+// }, err => {
|
|
|
+// this.$store.commit('shop/storeInfo/GET_STORE_COMMODITY_FAILURE', err)
|
|
|
+// })
|
|
|
+ },
|
|
|
+ handleCurrentChange (page) {
|
|
|
+ this.pageParams.page = page
|
|
|
+ this.pageCommodity(this.pageParams, this.ids, this.searchCode)
|
|
|
+ },
|
|
|
+// goBack () {
|
|
|
+// this.$router.back(-1)
|
|
|
+// }
|
|
|
+ isSpecificPriceTag: function (tag) {
|
|
|
+ return tag && tag.indexOf('特价') !== -1
|
|
|
+ },
|
|
|
+ goBatchDetail (batchCode) {
|
|
|
+ window.open('/store/productDetail/' + batchCode)
|
|
|
+ },
|
|
|
+ goBrandDetail (url, event) {
|
|
|
+ event.stopPropagation()
|
|
|
+ window.open(url)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+ #goods-list-fragment{
|
|
|
+ width: 100%;
|
|
|
+ background: #ece9ec;
|
|
|
+ padding-top: 20px;
|
|
|
+ }
|
|
|
+ #goods-list-fragment .container{
|
|
|
+ width: 1190px;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 产品分类调整*/
|
|
|
+ #goods-list-fragment .category-content{
|
|
|
+ max-height: 496px;
|
|
|
+ min-height: 53px;
|
|
|
+ overflow-y: scroll;
|
|
|
+ overflow-x: hidden;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ #goods-list-fragment .category-content .empty{
|
|
|
+ display: block;
|
|
|
+ width: 56px;
|
|
|
+ height: 16px;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-28px, -8px);
|
|
|
+ color: #5e7382;
|
|
|
+ }
|
|
|
+
|
|
|
+ .category-content el-tree{
|
|
|
+ /*border: none;*/
|
|
|
+ }
|
|
|
+ .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content,.el-tree-node:hover{
|
|
|
+ background: none !important;
|
|
|
+ }
|
|
|
+ .el-tree-node__content:hover{
|
|
|
+ background: none !important;
|
|
|
+ }
|
|
|
+ .el-tree-node__content:hover span{
|
|
|
+ color: #3c7df3;
|
|
|
+ }
|
|
|
+ .el-tree-node__content:hover span:last-child {
|
|
|
+ text-decoration: underline;
|
|
|
+ }
|
|
|
+ .el-pagination .el-pager li.active{
|
|
|
+ background-color: #5078cb;
|
|
|
+ border-color: #337ab7;
|
|
|
+ }
|
|
|
+ .el-tree-node__expand-icon{
|
|
|
+ margin-left: 3px;
|
|
|
+ font-family: "iconfont" !important;
|
|
|
+ font-size: 14px;
|
|
|
+ font-style: normal;
|
|
|
+ -webkit-font-smoothing: antialiased;
|
|
|
+ width: inherit;
|
|
|
+ height: inherit;
|
|
|
+ border: inherit;
|
|
|
+ font-weight: bold;
|
|
|
+ text-shadow: -1px 0px 0 #333;
|
|
|
+ margin-right: 3px !important;
|
|
|
+ }
|
|
|
+ .el-tree-node__content{
|
|
|
+ line-height: 30px;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ .el-tree-node__expand-icon.is-leaf{
|
|
|
+ visibility: hidden;
|
|
|
+ }
|
|
|
+ .el-tree-node__expand-icon:before{
|
|
|
+ content: "\E621";
|
|
|
+ }
|
|
|
+ #goods-list-fragment .category-title {
|
|
|
+ height: 34px;
|
|
|
+ background-color: #3c7df5;
|
|
|
+ font-size: 16px;
|
|
|
+ color: rgb(255,255,255);
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #goods-list-fragment .category-content li {
|
|
|
+ line-height: 33px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333;
|
|
|
+ float: left;
|
|
|
+ width: 100%;
|
|
|
+ padding-left: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #goods-list-fragment .category-content li a {
|
|
|
+ display: block;
|
|
|
+ padding-left: 15px;
|
|
|
+ text-decoration: none;
|
|
|
+ color: #333;
|
|
|
+ /* background:url("static/img/store/default/openblackR.png") no-repeat left; */
|
|
|
+ }
|
|
|
+
|
|
|
+ #goods-list-fragment .category-content li a:hover{
|
|
|
+ color: #5078cb;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ #goods-list-fragment .category-content ul.list-body {
|
|
|
+ display: none;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+
|
|
|
+ #goods-list-fragment .category-content ul.list-body.active {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ #goods-list-fragment .category-content ul.list-body li {
|
|
|
+ float: none;
|
|
|
+ background-image: none;
|
|
|
+ min-height: 26px;
|
|
|
+ line-height: 26px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #goods-list-fragment .category-content ul.list-body li a {
|
|
|
+ padding-left: 15px;
|
|
|
+ display: block;
|
|
|
+ color: rgb(50,50,50);
|
|
|
+ background: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ #goods-list-fragment .category-content ul.list-body li a:hover {
|
|
|
+ color: #5078cb;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ #goods-list-fragment .category-content ul.list-body li a.cur {
|
|
|
+ text-decoration: none;
|
|
|
+ font-size: 14px;
|
|
|
+ /* background:url("static/img/store/default/openblackR.png") no-repeat left; */
|
|
|
+ }
|
|
|
+
|
|
|
+ #goods-list-fragment .title-area {
|
|
|
+ margin-bottom: 30px;
|
|
|
+ width: 250px;
|
|
|
+ float: left;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+ #goods-list-fragment .category-content{
|
|
|
+ border: 1px solid #e8e8e8;
|
|
|
+ }
|
|
|
+ /* goods-area */
|
|
|
+ #goods-list-fragment .goods-area {
|
|
|
+ margin-left: 3px;
|
|
|
+ float: left;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #goods-list-fragment .goods-area .btn-line {
|
|
|
+ border-radius: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ #goods-list-fragment .btn-info.btn-line {
|
|
|
+ background-color: #5078CB;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ #goods-list-fragment .btn-line {
|
|
|
+ height: 34px;
|
|
|
+ width: 150px;
|
|
|
+ border: 1px solid #5078cb;
|
|
|
+ background-color: #fff;
|
|
|
+ color: rgb(80,120,203);
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ #goods-list-fragment .btn-line:hover {
|
|
|
+ background-color: #5078CB;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 物品列表 */
|
|
|
+ #goods-list-fragment .goodslist .brand-code {
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ #goods-list-fragment #search_btn {
|
|
|
+ background: #3b7cf4;
|
|
|
+ color: #FFFFFF;
|
|
|
+ border-bottom-right-radius: 25px;
|
|
|
+ border-top-right-radius: 25px;
|
|
|
+ height: 28px;
|
|
|
+ width: 58px;
|
|
|
+ padding-right: 50px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn:focus,.btn:active:focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn.active.focus {
|
|
|
+ outline: none;
|
|
|
+ border-color: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ #goods-list-fragment #search_input {
|
|
|
+ font-size: 14px;
|
|
|
+ height: 28px;
|
|
|
+ line-height: 28px;
|
|
|
+ width: 200px;
|
|
|
+ float: right;
|
|
|
+ border-bottom-left-radius: 25px;
|
|
|
+ border-top-left-radius: 25px;
|
|
|
+ border: 1px solid #3b7cf4;
|
|
|
+ }
|
|
|
+
|
|
|
+ #goods-list-fragment .brand-code .code {
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ #goods-list-fragment .brand-code .brand a {
|
|
|
+ color: #3c7df5;
|
|
|
+ }
|
|
|
+ #goods-list-fragment .goodslist thead tr{
|
|
|
+ background-color: #3b7cf4;
|
|
|
+ height: 34px;
|
|
|
+ }
|
|
|
+ #goods-list-fragment .goodslist tr th {
|
|
|
+ color: #fefefe;
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+ #goods-list-fragment .goodslist tr th:first-child{
|
|
|
+ border-top-left-radius: 5px;
|
|
|
+ border-bottom-left-radius: 5px;
|
|
|
+ }
|
|
|
+ #goods-list-fragment .goodslist tr th:last-child{
|
|
|
+ border-top-right-radius: 5px;
|
|
|
+ border-bottom-right-radius: 5px;
|
|
|
+ }
|
|
|
+ #goods-list-fragment .goodslist tr th div{
|
|
|
+ text-align: center;
|
|
|
+ border-right: 1px solid #fff;
|
|
|
+ }
|
|
|
+ #goods-list-fragment .goodslist tr th:last-child div{
|
|
|
+ border-right: none;
|
|
|
+ }
|
|
|
+ #goodslist-content .goods,#goodslist-content .from, #goodslist-content .can-div-sell {
|
|
|
+ padding-left: 20px;
|
|
|
+ }
|
|
|
+ #goodslist-content .goods span{
|
|
|
+ color: #f01010;
|
|
|
+ }
|
|
|
+ #goodslist-content .amount {
|
|
|
+ width: 50%;
|
|
|
+ float: left;
|
|
|
+ padding-left: 50px;
|
|
|
+ text-align:left;
|
|
|
+ }
|
|
|
+ #goodslist-content .amount div:last-child, #goodslist-content .price div:last-child{
|
|
|
+ color: #f01010;
|
|
|
+ }
|
|
|
+ #goodslist-content .price {
|
|
|
+ width: 50%;
|
|
|
+ float:right;
|
|
|
+ text-align:left;
|
|
|
+ }
|
|
|
+ #goods-list-fragment .category-content a.selected-node,
|
|
|
+ #goods-list-fragment .category-content ul.list-body li a.selected-node {
|
|
|
+ color: #5078cb;
|
|
|
+ }
|
|
|
+
|
|
|
+ #goods-list-fragment .category-content a.selected-parent-node,
|
|
|
+ #goods-list-fragment .category-content ul.list-body li a.selected-parent-node {
|
|
|
+ /* background:url("static/img/store/default/openblack.png") no-repeat left; */
|
|
|
+ }
|
|
|
+ #goods-list-fragment .goodslist tbody>tr:hover{
|
|
|
+ background: #ecf2fd;
|
|
|
+ }
|
|
|
+ #goods-list-fragment .goodslist tbody>tr {
|
|
|
+ border: 1px solid #e8e8e8;
|
|
|
+ }
|
|
|
+ #goods-list-fragment .goodslist tbody>tr td.commodity-icon .img{
|
|
|
+ border: 1px solid #e8e8e8;
|
|
|
+ margin: 10px;
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ overflow: hidden;
|
|
|
+ line-height: 75px;
|
|
|
+ }
|
|
|
+ #goods-list-fragment .goodslist tbody>tr td.commodity-icon .img>img {
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ }
|
|
|
+ #goods-list-fragment .goodslist tbody>tr td.brand-code .sellout-store-commodity {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+ #goods-list-fragment .goodslist tbody>tr td.brand-code .specific-price-tag {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+ #goods-list-fragment .goodslist td {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #333;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 20px;
|
|
|
+ height: 88px;
|
|
|
+ }
|
|
|
+ #goods-list-fragment .goodslist tbody>tr td .can-div-sell {
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 物品列表按钮 */
|
|
|
+ #goods-list-fragment .btn-buy-now {
|
|
|
+ background-color: #ffa422;
|
|
|
+ color: #fff;
|
|
|
+ width: 80px;
|
|
|
+ height: 30px;
|
|
|
+ font-size: 12px;
|
|
|
+ border: 1px solid #ffa422;
|
|
|
+ }
|
|
|
+
|
|
|
+ #goods-list-fragment .btn-add-cart {
|
|
|
+ margin-top: 10px;
|
|
|
+ color: #3b7cf4;
|
|
|
+ width: 80px;
|
|
|
+ height: 30px;
|
|
|
+ font-size: 12px;
|
|
|
+ background-color: #fff;
|
|
|
+ border: 1px solid #3b7cf4;
|
|
|
+ }
|
|
|
+ #goods-list-fragment .btn-buy-now:hover{
|
|
|
+ background: #214797;
|
|
|
+ border: 1px solid #214797;
|
|
|
+ }
|
|
|
+ #goods-list-fragment .btn-add-cart:hover{
|
|
|
+ background-color: #5078CB;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .no-record{
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 200px;
|
|
|
+ }
|
|
|
+ .no-record i{
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ .text-center{
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 30px;
|
|
|
+ }
|
|
|
+ .text-center .col-xs-2 img{
|
|
|
+ margin: 50px 0 50px 135px;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ .text-center .txt-info{
|
|
|
+ font-size: 14px;
|
|
|
+ margin: 50px 0px 0px -50px;
|
|
|
+ }
|
|
|
+ .text-center .col-xs-4 p{
|
|
|
+ color: #999;
|
|
|
+ margin-top: 3px;
|
|
|
+ margin-bottom: 2px;
|
|
|
+ }
|
|
|
+ .text-center .txt-info a{
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .text-center .col-xs-4 i{
|
|
|
+ color: #5078cb;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .goodslist{
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ @font-face {
|
|
|
+ font-family: 'iconfont'; /* project id 357960 */
|
|
|
+ src: url('//at.alicdn.com/t/font_27kjyd082ezpk3xr.eot');
|
|
|
+ src: url('//at.alicdn.com/t/font_27kjyd082ezpk3xr.eot?#iefix') format('embedded-opentype'),
|
|
|
+ url('//at.alicdn.com/t/font_27kjyd082ezpk3xr.woff') format('woff'),
|
|
|
+ url('//at.alicdn.com/t/font_27kjyd082ezpk3xr.ttf') format('truetype'),
|
|
|
+ url('//at.alicdn.com/t/font_27kjyd082ezpk3xr.svg#iconfont') format('svg');
|
|
|
+ }
|
|
|
+
|
|
|
+ <!-- 分页 -->
|
|
|
+ #goods-list-fragment .el-pagination .el-pager li.active {
|
|
|
+ border-color: #5078cb !important;
|
|
|
+ background-color: #5078cb !important;
|
|
|
+ }
|
|
|
</style>
|
|
|
+
|
gaoxm
