Skip to content

S
saas-manage
Commit e3f95781 by wuqian
Options

卡片

parent 5034da30
Showing with 1154 additions and 9 deletions
src/components/app/app-list.vue 0 → 100644
<template>
<div class="wraper" @mouseout="closeShow(data.id)">
<my-image
:title="data.name"
:proportion="proportion"
:image="data.icon"
@click="() => activeFn(data, index)">
<div
:class="`${data.restrictionLevel} ${
data.importedStatus ? 'store' : ''
}`">
<div class="left_mark" v-if="showSelectable">
<span
class="active-icon"
:class="{ active: selectIds.includes(data.id) }"></span>
</div>
<div class="right_check">
<slot name="right-check">
<!-- <div v-for="(item, index) in data.tagList" :key="index">
<img
style="display: block; border-radius: 5px"
height="20"
v-if="item.colorCode && item.colorCode.length > 7"
:src="formatUrl(imageUrl)"
:title="item.name"
alt="" />
<span
v-else
:title="item.name"
:style="{
display: 'block',
width: '20px',
fontSize: '12px',
textAlign: 'center',
lineHeight: '20px',
height: '20px',
background: item.colorCode,
borderRadius: '5px'
}">
{{ item.name.substr(0, 1) }}
</span>
</div>
<el-popover
v-if="isShowTag"
placement="bottom"
width="400"
trigger="click"
@show="showPopover(data)">
<div style="min-height: 50px">
<el-checkbox-group
v-model="customTag"
@change="($event) => changeTag($event)">
<el-checkbox
style="width: 100px"
v-for="(item, index) in customTagList"
:key="index"
:label="item.id"
:value="item.id">
<img
height="20"
style="vertical-align: middle; border-radius: 5px"
v-if="item.colorCode && item.colorCode.length > 7"
:src="
setimgUrl(item.colorCode, { h: 20, isCustom: isCustom })
"
:title="item.name"
alt="" />
<span v-else>
{{ item.name }}
</span>
</el-checkbox>
</el-checkbox-group>
</div>
<span
title="添加标签"
slot="reference"
v-if="operational"
class="addtag">
<img
title="添加标签"
width="24"
src="../../assets/images/supply/tig.png"
alt="" />
</span>
</el-popover> -->
</slot>
</div>
</div>
<div
class="app-btn-bottom"
style="width: 100%"
v-if="operational && isShowHomeSku === 'bottom'">
<transition>
<div
class="more_wrap"
style="max-width: 100%; overflow-x: auto; overflow-y: hidden;padding-top: 5px;">
<!-- 小图标按钮 -->
<slot name="operations" />
</div>
</transition>
</div>
</my-image>
<!-- -->
<div class="content">
<slot name="skuid" v-if="$slots.skuid"></slot>
<slot name="content">
<div
style="
display: flex;
align-items: center;
position: relative;
height: 24px;
">
<!-- 产品名称 -->
<slot name="product-name"></slot>
<!-- 价格 -->
<slot name="price" />
<!-- <div>
<span :class="!data.isCollectFee ? 'green' : 'red'">
{{ !data.isCollectFee ? '免费' : '收费' }}
</span>
</div> -->
<slot name="synthesizeStatus"></slot>
<slot name="level-time"></slot>
</div>
<!-- footer -->
<div class="footer_wrap">
<!-- <div
class="bottom-home-sku"
@click.stop="copy(data.id)">
<img
:title="'复制' + data.id"
height="20"
:src="require('@/assets/images/supply/id.png')"
alt="" />
<span>{{ data.id }}</span>
</div> -->
<!-- 底部额外图标 -->
<slot name="footer" />
</div>
</slot>
<slot name="otherContent"></slot>
</div>
<div class="tag-dialog"></div>
<!-- 用来放一些 Dialog -->
<slot name="extra" />
</div>
</template>
<script>
import MyImage from '../base/image.vue'
export default {
inheritAttrs: false,
props: {
// 控制一些元素显示与否
isStore: {
type: Boolean
},
width: {
type: Number,
default: 300
},
hasWidth: {
type: Boolean,
default: false
},
isFormat: {
type: Boolean,
default: false
},
smallWidth: {
type: Number,
default: 45
},
isShowTag: {
type: Boolean,
default: false
},
isShowHomeSku: {
type: [String, Boolean],
validator: (v) => v === 'top' || v === 'bottom' || !v
},
isSkuImageList: {
type: Boolean
},
isShowSkuId: {
type: Boolean,
default: true
},
isShowTitle: {
type: Boolean,
default: false
},
isShowLevel: {
type: Boolean,
default: true
},
isShowStatus: {
type: Boolean,
default: true
},
isShowSku: {
type: Boolean,
default: true
},
isShowSales: {
type: Boolean,
default: true
},
showSelectable: {
type: Boolean,
default: true
},
openly: {
type: Number,
default: 1
},
showOpenly: {
type: Boolean,
default: false
},
proportion: {
type: Number,
default: 125
},
data: {
type: Object,
default: () => ({ colorImageList: [] })
},
selectIds: {
type: Array,
default: () => []
},
activeFn: {
type: Function,
default: () => {}
},
index: {
type: Number,
default: null
},
searchForm: {
type: Object,
default: () => {}
},
operational: {
type: Boolean,
default: true
},
customTagList: {
type: Array,
default: () => []
},
isCustom: {
type: Boolean,
default: () => false
}
},
data() {
return {
imageUrl: '',
showColorImg: {},
logList: [],
customTag: []
}
},
components: {
MyImage
},
computed: {},
methods: {
formatUrl(url, num = 300) {
if (this.isFormat && url) {
if (!url.includes('custom.jomalls.com')) {
return url
}
const name = url.split('/')
const format = name[name.length - 1].split('.')
name[name.length - 1] = format[0] + `-${num}` + '.' + format[1]
return name.join('/')
}
return url
},
showPopover(data) {
this.customTag = []
if (data.tagList) {
this.customTag = data.tagList.map((item) => item.id)
}
},
isNew(date) {
const newdate = new Date().getTime()
date = new Date(date).getTime()
const difference = newdate - date
return difference < 604800000
},
showDetails(item) {
this.$emit('showDetails', item)
},
setCurrentImg(id, val) {
this.$set(this.showColorImg, id, true)
this.imageUrl = val
},
closeShow(id) {
this.$set(this.showColorImg, id, false)
},
copy(text) {
const oInput = document.createElement('input')
oInput.value = text
document.body.appendChild(oInput)
oInput.select() // 选择对象
document.execCommand('Copy') // 执行浏览器复制命令
oInput.className = 'oInput'
oInput.style.display = 'none'
document.body.removeChild(oInput)
this.$message.success('复制成功')
},
edit(item) {
this.$emit('showEdit', item)
}
}
}
</script>
<style scoped>
.wraper {
position: relative;
border-radius: 12px 0px 0px 0px;
border: 1px solid #efefef;
background: #eeeeee;
overflow: hidden;
}
.wraper:hover {
border: 1px solid #4168ff;
}
.addtag {
display: none;
}
.wraper:hover .addtag {
display: block;
}
.sales_wrap {
padding-top: 5px;
height: 24px;
display: flex;
align-items: center;
}
.sales_wrap svg {
margin-bottom: 5px;
}
.sales {
flex: 1;
height: 24px;
margin-left: 5px;
line-height: 24px;
box-sizing: border-box;
background-position: left center;
background-size: contain;
background-repeat: no-repeat;
display: inline-block;
font-size: 14px;
vertical-align: bottom;
padding-top: 1px;
font-weight: bold;
text-align: center;
}
.high {
color: red;
font-weight: bold;
color: #444444;
background: linear-gradient(0deg, rgb(255, 255, 255) 0%, #dddddd 100%);
border-radius: 4px 4px 0 0;
position: relative;
}
.high::before {
position: absolute;
top: -11px;
right: 0;
left: 0;
text-align: center;
line-height: 20px;
font-size: 12px;
font-weight: normal;
}
.today.high::before {
content: 'today';
}
.seven.high::before {
content: 'seven';
}
.thirty.high::before {
content: 'thirty';
}
.history.high::before {
content: 'history';
}
.active-icon {
position: relative;
display: block;
width: 16px;
height: 16px;
border: 1px solid #cccccc;
box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.4) inset;
border-radius: 8px;
background: #fff;
}
.active-icon.active {
background: #4168ff;
position: relative;
border-color: #4168ff;
box-shadow: none;
font-size: 18px;
top: -1px;
left: -1px;
}
.active-icon.active::after {
position: absolute;
content: '';
top: 0px;
left: 4px;
width: 4px;
height: 8px;
border-width: 2px;
border-style: solid;
border-color: transparent #fff #fff transparent;
transform: rotate(45deg) scale(0.8);
}
.colors_main {
height: 40px;
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.colors_wrap {
height: 40px;
flex: 1;
overflow-x: auto;
overflow-y: hidden;
}
.colors {
white-space: nowrap;
display: flex;
}
.colors_wrap::-webkit-scrollbar {
height: 5px;
width: 5px;
}
.colors li {
border-right: 1px solid #fff;
width: 30px;
min-width: 30px;
height: 30px;
background: #ddd;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
margin-right: 5px;
border-radius: 5px;
overflow: hidden;
border: 1px solid #ddd;
box-sizing: border-box;
}
.colors li img {
object-fit: contain;
object-position: center;
}
.star {
display: inline-block;
width: 80px;
color: red;
padding-left: 2px;
}
.star span {
display: inline-block;
height: 14px;
width: 14px;
margin-right: 2px;
background-position: center;
background-size: contain;
/* background-image: url('../../assets/icon/star-no.svg'); */
}
.star span.active {
/* background-image: url('../../assets/icon/star.svg'); */
}
.moneyall {
/* background-image: url('../../assets/images/moneyall.png'); */
}
.moneyone {
/* background-image: url('../../assets/images/moneyone.png'); */
}
.rmb {
/* background-image: url('../../assets/images/rmb.png'); */
}
.version {
display: block;
width: 18px;
height: 18px;
line-height: 14px;
font-size: 12px;
color: #fff;
padding: 0 0 3px 2px;
text-align: center;
box-sizing: border-box;
/* background: no-repeat url('../../assets/images/supply/no-version.png'); */
}
.repeat {
display: inline-block;
height: 24px;
width: 24px;
border-radius: 12px;
font-size: 12px;
background: red;
line-height: 22px;
color: #fff;
text-align: center;
}
/* .version.main {
background-image: url('../../assets/images/supply/version.png');
}
.dollar {
background-image: url('../../assets/images/supply/money.png');
}
.eidt_title {
background-image: url('../../assets/images/edit001.png');
}
.edit_online {
background-image: url('../../assets/images/plane.png');
} */
.scroll {
overflow: auto;
padding-top: 10px;
user-select: none;
border: 1px solid #ddd;
}
.empty.elements {
border: none;
}
.select-number {
position: absolute;
left: 5px;
top: 10px;
}
.left_mark {
position: absolute;
top: 5px;
left: 5px;
}
.right_check {
position: absolute;
top: 5px;
right: 5px;
display: flex;
}
.right_check > * {
display: block;
margin-bottom: 5px;
}
.app-btn-top {
position: relative;
height: 30px;
}
.app-btn-top > .more_wrap {
position: absolute;
right: 5px;
}
.app-btn-bottom {
position: absolute;
bottom: 0px;
left: 0;
}
.log_btn {
height: 22px;
display: inline-block;
background: #ffffff;
margin-right: 5px;
padding: 0 8px;
font-size: 12px;
vertical-align: middle;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2);
border-radius: 13px;
text-align: center;
cursor: pointer;
}
.edit {
vertical-align: middle;
}
.content {
padding: 5px 10px;
background: linear-gradient(
90deg,
rgba(228, 228, 228, 0.4) 0%,
rgba(255, 255, 255, 1) 100%
);
}
.wraper:hover .content {
background: linear-gradient(
90deg,
rgba(26, 125, 255, 0.404) 0%,
rgba(64, 158, 255, 0) 100%
);
}
.footer_wrap {
display: flex;
align-items: center;
padding: 5px 0px 0;
}
.more_wrap {
display: none;
height: 35px;
align-items: center;
}
.wraper:hover .more_wrap {
display: flex;
}
.more_wrap::v-deep > img {
margin-left: 6px;
}
.more_wrap::v-deep > img:hover {
transform: scale(1.3);
}
.price {
color: rgba(181, 124, 91, 1);
font-size: 14px;
font-weight: bold;
}
.green {
display: block;
width: 43px;
height: 16px;
line-height: 14px;
background: #8fc31f;
text-align: center;
border-radius: 8px;
font-size: 12px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #ffffff;
}
.red {
display: block;
width: 43px;
height: 16px;
line-height: 14px;
background: #f56c6c;
text-align: center;
border-radius: 8px;
font-size: 12px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #ffffff;
}
.bottom-home-sku {
cursor: pointer;
display: flex;
align-items: center;
padding: 2px 5px 2px 0;
background: rgba(255, 255, 255, 0.5);
border-radius: 5px;
margin-right: 6px;
position: relative;
z-index: 1;
}
.bottom-home-sku span,
.top-home-sku span {
font-size: 14px;
vertical-align: top;
margin-left: 5px;
color: #222;
}
.more_wrap::v-deep > .delete:hover,
.more_wrap::v-deep > .download:hover {
transform: scale(1.3);
}
.delete,
.download {
display: inline-block;
width: 20px;
height: 20px;
background: rgba(255, 0, 0, 0.678);
padding: 0 4px;
border-radius: 10px;
box-sizing: border-box;
}
.delete svg,
.download svg {
margin-top: -1px;
width: 12px;
height: 12px;
}
.product {
right: 66px;
background: #4168ff;
color: #ffffff;
padding: 0 8px 8px 8px;
border-radius: 18px;
}
.variants {
display: flex;
padding: 5px 0;
}
.variants + .variants {
border-top: 1px solid #ddd;
}
.variants .title {
width: 120px;
min-width: 110px;
color: #303133;
font-size: 14px;
font-weight: bold;
line-height: 20px;
}
.variants li {
display: inline-block;
position: relative;
width: 96px;
padding: 0 6px;
margin-left: 6px;
box-sizing: border-box;
border: 1px solid #dcdfe6;
background: #fff;
border-radius: 4px;
overflow: hidden;
white-space: nowrap;
font-weight: 500;
font-size: 12px;
line-height: 24px;
color: #606266;
cursor: pointer;
text-overflow: ellipsis;
padding-right: 10px;
}
.variants li.active {
border: 1px solid blue;
}
.variants li i {
position: absolute;
top: 7px;
right: 5px;
}
.value {
display: inline-block;
width: 150px;
text-align: left;
color: #000;
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wraper:hover .store::after {
display: none;
}
.store::after {
position: absolute;
background: #fff;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
z-index: 999;
/* background: rgba(0, 0, 0, 0.3) url('../../assets/images/supply/dianpu.png')
no-repeat center; */
}
.img_footer_cont {
position: absolute;
display: none;
right: 0;
bottom: 0;
left: 0;
padding-top: 50px;
background-image: linear-gradient(
to top,
rgba(255, 255, 255, 0.9),
rgba(255, 255, 255, 0)
);
}
.img_footer_cont .title {
min-height: 24px;
line-height: 24px;
font-size: 12px;
color: #222;
padding: 5px 8px 0;
}
.wraper:hover .img_footer_cont {
display: block;
}
.top-home-sku {
position: absolute;
bottom: 5px;
left: 5px;
z-index: 888;
display: flex;
align-items: center;
padding: 2px 5px;
background: hsla(0, 0%, 100%, 0.5);
border-radius: 5px;
}
.top-home-sku > span {
width: auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
}
.openly {
top: 5px;
z-index: 3;
right: 5px;
position: absolute;
}
</style>
src/components/base/image.vue 0 → 100644
<!--
* @Description: 描述
* @Author: chd
* @Date: 2021-06-07 11:13:02
* @LastEditors: chd
* @LastEditTime: 2021-07-03 14:42:26
-->
<script>
export default {
functional: true,
name: 'image-view',
props: {
proportion: {
type: Number,
default: 0,
},
image: {
type: String,
default: '',
},
},
render(h, { children, listeners, props, data }) {
const title = data?.attrs?.title
return (
<div
title={title}
class={'image-view'}
style={data.style}
onClick={(e) => listeners.click && listeners.click(e)}>
<div
class="before"
style={{
paddingBottom: props.proportion ? props.proportion + '%' : '100%',
}}></div>
<div
style={{
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
overflow: 'hidden',
textAlign: 'center',
}}>
<img
height="100%"
loading="lazy"
src={props.image}
alt=""
onError={(e) => {
e.target.title = '加载失败'
}}
/>
</div>
{children}
</div>
)
},
}
</script>
<style scoped>
.image-view {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
position: relative;
cursor: pointer;
}
.image-view .before {
height: 0;
padding-bottom: 100%;
}
.image-view img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.image-view img[src=''],
.image-view img:not([src]) {
opacity: 0;
}
</style>
src/views/system/app.vue
...@@ -101,7 +101,7 @@ ...@@ -101,7 +101,7 @@
</el-button> </el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div <!-- <div
class="table_wrap" class="table_wrap"
style="min-height: 50%; max-height: 82%; padding: 0"> style="min-height: 50%; max-height: 82%; padding: 0">
<table-view <table-view
...@@ -111,9 +111,94 @@ ...@@ -111,9 +111,94 @@
ref="multipleTable" ref="multipleTable"
@selectionChange="selectionChange" @selectionChange="selectionChange"
:selection="true"></table-view> :selection="true"></table-view>
</div> -->
<div
class="table_wrap scroll"
style="min-height: 50%; max-height: 82%; padding: 0">
<div class="card-mode" v-if="sourceData.length > 0">
<div
class="card-item"
v-for="(item, index) in sourceData"
:key="index"
@click="onCardClicked(item)">
<app-list
:data="item"
:index="index"
:isFormat="true"
isShowHomeSku="bottom"
:isSkuImageList="true"
:hasWidth="true"
:isShowSku="false"
:isShowSales="false"
:isCustom="true"
:selectIds="selectIds">
<template slot="operations">
<img
:class="{ 'icon-disabled': !item.synthesizeStatus }"
@click.stop="editInfo(item)"
title="编辑"
width="24"
height="24"
:src="require('@/assets/images/edit.png')"
alt="" />
<img
title="删除"
width="24"
height="24"
@click.stop="deleteSection(item)"
:src="require('@/assets/images/delete.png')"
alt="" />
</template>
<template slot="price">
<span class="price" :title="item.name">
{{ item.name }}
</span>
</template>
<template slot="synthesizeStatus">
<div title="应用类型" style="position: absolute; right: 0">
<el-tag :type="!item.isCollectFee ? 'success' : 'warning'">
{{ !item.isCollectFee ? '免费' : '收费' }}
</el-tag>
</div>
</template>
<template slot="otherContent">
<div
:title="item.description"
class="sds-base-sku"
style="font-size: 14px">
<span>简述：{{ item.description }}</span>
</div>
<div class="sds-keyid">
<div class="product-id" v-show="item.id">
<img
:title="'appId:' + item.id"
height="20"
:src="require('@/assets/images/id.png')"
alt="" />
<span :title="item.id">
{{ item.id }}
</span>
</div>
<div class="product-sku">
<span :title="item.categoryName">
{{ item.categoryName }}
</span>
</div>
</div>
</template>
</app-list>
</div>
</div>
<div class="empty" v-else>暂无数据</div>
</div> </div>
<div slot="footer" style="display: flex; justify-content: center"> <div slot="footer" style="display: flex; justify-content: center;align-items: center;">
<!-- <pagination :setValue="setpaginationOptions" :options="paginationOptions" /> --> <div class="select-number">
选中
<span style="color: red; font-weight: bold">
{{ selection.length }}
</span>
</div>
<el-pagination <el-pagination
layout="sizes, total, prev, pager, next, jumper" layout="sizes, total, prev, pager, next, jumper"
background background
...@@ -352,9 +437,9 @@ ...@@ -352,9 +437,9 @@
</template> </template>
<script> <script>
import Editor from '@/components/wangeditor/index.vue' import Editor from '@/components/wangeditor/index.vue'
import tableView from '@/common/components/base/tableView.vue'
import ChooseTimePeriod from '@/components/base/chooseTimePeriod.vue' import ChooseTimePeriod from '@/components/base/chooseTimePeriod.vue'
// import ImageView from '@/components/base/ImageView.vue' // import ImageView from '@/components/base/ImageView.vue'
import appList from '@/components/app/app-list.vue'
import pagination from '../../mixins/pagination' import pagination from '../../mixins/pagination'
import { get, post } from '@/common/api/axios' import { get, post } from '@/common/api/axios'
import UploadImages from '@/components/base/image-list.vue' import UploadImages from '@/components/base/image-list.vue'
...@@ -364,7 +449,7 @@ export default { ...@@ -364,7 +449,7 @@ export default {
components: { components: {
UploadImages, UploadImages,
'v-editor': Editor, 'v-editor': Editor,
tableView, appList,
layout, layout,
ChooseTimePeriod ChooseTimePeriod
// ImageView // ImageView
...@@ -444,6 +529,9 @@ export default { ...@@ -444,6 +529,9 @@ export default {
this.loadTypesData() this.loadTypesData()
}, },
computed: { computed: {
selectIds() {
return this.selection.map((item) => item.id)
},
tableColumns() { tableColumns() {
return [ return [
{ {
...@@ -512,6 +600,23 @@ export default { ...@@ -512,6 +600,23 @@ export default {
} }
}, },
methods: { methods: {
onCardClicked(item) {
const status = this.isItemSelected(item)
if (!status) {
this.selection.push(item)
} else {
const index = this.selection.findIndex((e) => {
return e.id === item.id
})
this.selection.splice(index, 1)
}
},
isItemSelected(item) {
const index = this.selection.findIndex((e) => {
return item.id === e.id
})
return index !== -1
},
toggleNodeExpanded(node) { toggleNodeExpanded(node) {
node.expanded = !node.expanded node.expanded = !node.expanded
}, },
...@@ -538,7 +643,7 @@ export default { ...@@ -538,7 +643,7 @@ export default {
const arr = v ? [v] : this.selection const arr = v ? [v] : this.selection
if (arr.length === 0) return this.$message('请勾选至少一条记录') if (arr.length === 0) return this.$message('请勾选至少一条记录')
const ids = arr.map((item) => item.id).join() const ids = arr.map((item) => item.id).join()
this.$confirm('确定删除选中的信息？', '提示', { this.$confirm('确定删除选中的应用？', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
...@@ -553,7 +658,7 @@ export default { ...@@ -553,7 +658,7 @@ export default {
}) })
this.getList() this.getList()
this.selection = [] this.selection = []
this.$refs.multipleTable.clearSelectionBox() // this.$refs.multipleTable.clearSelectionBox()
} else { } else {
this.$alert(res.message, '错误提示', { this.$alert(res.message, '错误提示', {
dangerouslyUseHTMLString: true dangerouslyUseHTMLString: true
...@@ -563,7 +668,7 @@ export default { ...@@ -563,7 +668,7 @@ export default {
}) })
.catch(() => { .catch(() => {
this.selection = [] this.selection = []
this.$refs.multipleTable.clearSelectionBox() // this.$refs.multipleTable.clearSelectionBox()
}) })
}, },
// 分页 // 分页
...@@ -843,7 +948,7 @@ export default { ...@@ -843,7 +948,7 @@ export default {
} }
</script> </script>
<style scoped> <style scoped lang="scss">
.customize-tree-node__label { .customize-tree-node__label {
margin-left: 4px; margin-left: 4px;
flex: 1; flex: 1;
...@@ -851,7 +956,76 @@ export default { ...@@ -851,7 +956,76 @@ export default {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
::v-deep .card-mode {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px;
.price {
color: rgba(181, 124, 91, 1);
font-size: 14px;
font-weight: bold;
margin-right: 5px;
}
.sds-base-sku {
height: 30px;
line-height: 30px;
display: flex;
cursor: pointer;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.sds-keyid {
height: 30px;
align-items: center;
display: flex;
}
.product-id {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
line-height: 30px;
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.5);
border-radius: 5px;
margin-right: 6px;
position: relative;
z-index: 1;
flex: 1;
cursor: pointer;
}
.product-id > span {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-size: 14px;
vertical-align: top;
margin-left: 5px;
color: #222;
}
.product-sku {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
line-height: 30px;
flex: 1;
text-align: right;
cursor: pointer;
}
.product-sku > span {
font-size: 14px;
border: solid 1px #9ac1f5;
background-color: #9ac1f5;
border-radius: 4px;
color: #fff;
padding: 2px 6px;
}
}
.customize-tree-node { .customize-tree-node {
font-size: 14px; font-size: 14px;
flex: 1; flex: 1;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment