|
|
|
@ -3,24 +3,53 @@ |
|
|
|
|
|
|
|
<PromptText text='平台针对不同品牌产品，已做了风险提醒义务，请安全规避销售。平台仅保障货品正版，针对有风险的产品，请具备安全销售方案后再开展销售。' :type="3" /> |
|
|
|
|
|
|
|
<!-- page header --> |
|
|
|
<div class="pageheader"> |
|
|
|
<span class="pagetitle">基本设置</span> |
|
|
|
</div> |
|
|
|
<div class="supply-list" v-for="(vers, classify_id) in classifyId2Vers" :key="classify_id"> |
|
|
|
<div class="classify"> |
|
|
|
<span class="classify-title mr-20">{{ classifyId2Name[classify_id] }}</span> |
|
|
|
|
|
|
|
<div class="ver-anchor-point flex mr-12" v-for="verid in vers" :key="verid"> |
|
|
|
<a class="flex anchor" href="javascript:;" @click="scrollToAnchor(verid)"> |
|
|
|
<img class="ver-icon" :src="require('@/assets/serviceIcon/ver_'+verid+'.svg')" alt="" style="width:20px"><span>{{ ver2info[verid].name }}</span> |
|
|
|
</a> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- page content --> |
|
|
|
<div class="site-setting-wrap min-flex-right"> |
|
|
|
<div class="siteMessage flex-common" id="siteMessage1"> |
|
|
|
<h3>站点信息</h3> |
|
|
|
<el-form> |
|
|
|
<div class="flex-wrap"> |
|
|
|
<div class="flex-left"> |
|
|
|
<div class="ver-wrap" v-for="verid in vers" :key="verid" :id="'ver_'+verid"> |
|
|
|
<div class="ver"> |
|
|
|
<div class="ver-title-wrap"> |
|
|
|
<img class="ver-icon mr-8" :src="require('@/assets/serviceIcon/ver_'+verid+'.svg')" alt=""> |
|
|
|
<span class="ver-title mr-8">{{ ver2info[verid].name }}</span> |
|
|
|
<div class="status-item divgreen mr-8" v-if="ver2info[verid].is_official_api==1"><span class="fontgreen">官方接口</span></div> |
|
|
|
<div class="status-item divblue" v-if="ver2info[verid].sale_policy==1"><span class="fontblue">{{ salePolicy[ver2info[verid].sale_policy] }}</span></div> |
|
|
|
<div class="status-item divorange" v-else-if="ver2info[verid].sale_policy==2"><span class="fontorange">{{ salePolicy[ver2info[verid].sale_policy] }}</span></div> |
|
|
|
<div class="status-item divred" v-if="ver2info[verid].sale_policy==3"><span class="fontred">{{ salePolicy[ver2info[verid].sale_policy] }}</span></div> |
|
|
|
</div> |
|
|
|
<div class="ver-desc flex" v-if="ver2types[verid] && ver2types[verid].length>1">{{ ver2info[verid].desc }}</div> |
|
|
|
<div class="ver-services-wrap" v-if="ver2types[verid] && ver2types[verid].length>1"> |
|
|
|
<div class="ver-service" v-for="type in ver2types[verid]" :key="type"> |
|
|
|
<div class="service-title">{{ type2name[type] }}</div> |
|
|
|
<div class="service-desc"> |
|
|
|
<el-form> |
|
|
|
<GuipToolTip :content="type2info[type].introduce"> |
|
|
|
<span>{{ type2info[type].introduce }}</span> |
|
|
|
</GuipToolTip> |
|
|
|
</el-form> |
|
|
|
</div> |
|
|
|
<div class="service-price">￥<span class="price">{{ supplyPriceList[type].price }}</span><span class="unit"> / {{ supplyPriceList[type].unit_format }}</span></div> |
|
|
|
</div> |
|
|
|
<div class="flex-line"></div> |
|
|
|
<div class="flex-right"> |
|
|
|
</div> |
|
|
|
<div class="ver-single flex" v-else> |
|
|
|
<div class="ver-single-desc"> |
|
|
|
<el-form> |
|
|
|
<GuipToolTip :content="ver2info[verid].desc"> |
|
|
|
<span>{{ ver2info[verid].desc }}</span> |
|
|
|
</GuipToolTip> |
|
|
|
</el-form> |
|
|
|
</div> |
|
|
|
<div class="service-price">￥<span class="price">{{ supplyPriceList[ver2types[verid][0]].price }}</span><span class="unit"> / {{ supplyPriceList[ver2types[verid][0]].unit_format }}</span></div> |
|
|
|
</div> |
|
|
|
</el-form> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -30,6 +59,7 @@ |
|
|
|
import store from '@/store'; |
|
|
|
import { mapState } from 'vuex'; |
|
|
|
import PromptText from '@/components/PromptText.vue'; |
|
|
|
import GuipToolTip from '@/components/GuipToolTip.vue'; |
|
|
|
|
|
|
|
export default { |
|
|
|
// 站点设置 |
|
|
|
@ -37,17 +67,20 @@ export default { |
|
|
|
props: [''], |
|
|
|
components: { |
|
|
|
PromptText, |
|
|
|
GuipToolTip, |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
// AUTH |
|
|
|
token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTI2NDY1NDUsIm5iZiI6MTc1MjY0NjU0NSwiZXhwIjoxNzU1MjM4NTQ1LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.G-Is-x9qPMiV_urOlDPQVRjfAIozySxL5EK2k82d46k', |
|
|
|
// 表格加载 |
|
|
|
tableLoading: true, |
|
|
|
type2name:[], |
|
|
|
serviceClassifications: [], |
|
|
|
serviceClassificationServices: [], |
|
|
|
classifyId2Name: [], |
|
|
|
classifyId2Vers: [], |
|
|
|
ver2types: [], |
|
|
|
ver2info: [], |
|
|
|
type2info: [], |
|
|
|
supplyPriceList: [], |
|
|
|
salePolicy: [], |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
@ -60,38 +93,39 @@ export default { |
|
|
|
mounted() { |
|
|
|
store.commit('SET_PAGETITLE', '基本设置'); |
|
|
|
|
|
|
|
this.getSiteInfo(); |
|
|
|
this.getPayList(); |
|
|
|
this.getAddablePays(); |
|
|
|
this.getSupplyServiceList(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 获取可添加的收款方式 |
|
|
|
scrollToAnchor(ver) { |
|
|
|
this.$nextTick(() => { |
|
|
|
const element = document.getElementById('ver_'+ver); |
|
|
|
if (element) { |
|
|
|
element.scrollIntoView({ behavior: 'smooth' }); |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
getSupplyServiceList() { |
|
|
|
this.$http('POST', '/agentnew/ajax_get_supply_services', { |
|
|
|
|
|
|
|
this.tableLoading = true |
|
|
|
const that = this |
|
|
|
that.serviceList = [] |
|
|
|
this.$http('POST', '/agentnew/ajax_get_supply_services', { |
|
|
|
|
|
|
|
},{ |
|
|
|
headers:{ |
|
|
|
'Auth': this.token |
|
|
|
} |
|
|
|
}).then(response => { |
|
|
|
this.tableLoading = false |
|
|
|
this.$nextTick(() => { |
|
|
|
that.serviceList = response.data.list |
|
|
|
this.type2name = response.data.type2name; |
|
|
|
this.serviceClassifications = response.data.service_classification; |
|
|
|
this.serviceClassificationServices = response.data.service_classification_services; |
|
|
|
this.supplyPriceList = response.data.supply_price; |
|
|
|
console.log(this.supplyPriceList[2].price) |
|
|
|
console.log(this.supplyPriceList[2].unit_format) |
|
|
|
}) |
|
|
|
}).catch(error => { |
|
|
|
console.error(error, 'error') |
|
|
|
},{ |
|
|
|
headers:{ |
|
|
|
'Auth': this.token |
|
|
|
} |
|
|
|
}).then(response => { |
|
|
|
this.$nextTick(() => { |
|
|
|
this.classifyId2Name = response.data.classifyid2name; |
|
|
|
this.classifyId2Vers = response.data.classifyid2vers; |
|
|
|
this.ver2types = response.data.ver2types; |
|
|
|
this.ver2info = response.data.ver2info; |
|
|
|
this.type2name = response.data.type2name; |
|
|
|
this.type2info = response.data.type2info; |
|
|
|
this.supplyPriceList = response.data.supply_price; |
|
|
|
this.salePolicy = response.data.sale_policy; |
|
|
|
}) |
|
|
|
}, |
|
|
|
}).catch(error => { |
|
|
|
console.error(error, 'error') |
|
|
|
}) |
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
@ -100,129 +134,318 @@ export default { |
|
|
|
padding: 20px 48px; |
|
|
|
} |
|
|
|
|
|
|
|
.pageheader { |
|
|
|
.classify { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
/* 关键属性 */ |
|
|
|
align-items: center; |
|
|
|
margin: 16px 0px 16px 0px; |
|
|
|
margin-bottom: 20px; |
|
|
|
margin-top: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.pagetitle { |
|
|
|
.classify-title { |
|
|
|
font-family: Microsoft YaHei UI; |
|
|
|
font-size: 20px; |
|
|
|
font-weight: bold; |
|
|
|
line-height: 26px; |
|
|
|
letter-spacing: 0.08em; |
|
|
|
color: #1E2226; |
|
|
|
} |
|
|
|
|
|
|
|
.ver-wrap { |
|
|
|
width: 100%; |
|
|
|
/* 自动布局 */ |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
gap: 10px; |
|
|
|
z-index: 0; |
|
|
|
background: #FFFFFF; |
|
|
|
margin-bottom: 10px; |
|
|
|
} |
|
|
|
.ver { |
|
|
|
padding: 20px; |
|
|
|
} |
|
|
|
.ver-title-wrap { |
|
|
|
height: 30px; |
|
|
|
/* 自动布局 */ |
|
|
|
display: flex; |
|
|
|
justify-content: space-flex-start; |
|
|
|
align-items: center; |
|
|
|
padding: 0px; |
|
|
|
align-self: stretch; |
|
|
|
z-index: 0; |
|
|
|
} |
|
|
|
.ver-title { |
|
|
|
/* body/body 1_bold */ |
|
|
|
font-family: Microsoft YaHei UI; |
|
|
|
font-size: 16px; |
|
|
|
font-weight: bold; |
|
|
|
line-height: normal; |
|
|
|
text-align: justify; /* 浏览器可能不支持 */ |
|
|
|
letter-spacing: 0.08em; |
|
|
|
/* text/text_1 */ |
|
|
|
color: #1E2226; |
|
|
|
margin-top: 8px; |
|
|
|
} |
|
|
|
|
|
|
|
.siteMessage { |
|
|
|
.ver-icon { |
|
|
|
height: 30px; |
|
|
|
width: 30px; |
|
|
|
} |
|
|
|
|
|
|
|
.ver-anchor-point { |
|
|
|
/* 自动布局子元素 */ |
|
|
|
height: 28px; |
|
|
|
/* 自动布局 */ |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
padding: 4px 10px; |
|
|
|
gap: 4px; |
|
|
|
z-index: 0; |
|
|
|
border-radius: 100px; |
|
|
|
/* text/text_white_1 */ |
|
|
|
background: #FFFFFF; |
|
|
|
box-sizing: border-box; |
|
|
|
/* main/main_stardard */ |
|
|
|
} |
|
|
|
.ver-anchor-point:hover { |
|
|
|
border: 1px solid #006AFF; |
|
|
|
} |
|
|
|
.anchor { |
|
|
|
text-decoration: none; |
|
|
|
/* body/body 2_regular */ |
|
|
|
font-family: Microsoft YaHei UI; |
|
|
|
font-size: 14px; |
|
|
|
font-weight: normal; |
|
|
|
line-height: normal; |
|
|
|
text-align: justify; /* 浏览器可能不支持 */ |
|
|
|
letter-spacing: 0.08em; |
|
|
|
/* text/text_4 */ |
|
|
|
color: #8A9099; |
|
|
|
} |
|
|
|
|
|
|
|
.ver-desc { |
|
|
|
/* body/body 2_regular */ |
|
|
|
font-family: Microsoft YaHei UI; |
|
|
|
font-size: 14px; |
|
|
|
font-weight: normal; |
|
|
|
line-height: normal; |
|
|
|
text-align: justify; /* 浏览器可能不支持 */ |
|
|
|
letter-spacing: 0.08em; |
|
|
|
color: #8A8C99; |
|
|
|
margin-top: 10px; |
|
|
|
margin-bottom: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.ver-single { |
|
|
|
font-family: Microsoft YaHei UI; |
|
|
|
font-size: 14px; |
|
|
|
font-weight: normal; |
|
|
|
line-height: normal; |
|
|
|
//text-align: justify; /* 浏览器可能不支持 */ |
|
|
|
letter-spacing: 0.08em; |
|
|
|
color: #8A8C99; |
|
|
|
margin-top: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.ver-single-desc { |
|
|
|
font-family: Microsoft YaHei UI; |
|
|
|
font-size: 14px; |
|
|
|
font-weight: normal; |
|
|
|
line-height: normal; |
|
|
|
text-align: justify; /* 浏览器可能不支持 */ |
|
|
|
letter-spacing: 0.08em; |
|
|
|
color: #8A8C99; |
|
|
|
width: 600px; |
|
|
|
height: 18px; |
|
|
|
display: -webkit-box; |
|
|
|
-webkit-line-clamp: 1; |
|
|
|
-webkit-box-orient: vertical; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
} |
|
|
|
|
|
|
|
.ver-services-wrap { |
|
|
|
width: 100%; |
|
|
|
display: grid; |
|
|
|
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); |
|
|
|
justify-items: flex-start; |
|
|
|
gap: 14px 14px; |
|
|
|
|
|
|
|
padding: 0px; |
|
|
|
} |
|
|
|
|
|
|
|
.ver-service { |
|
|
|
width: 270px; |
|
|
|
border-radius: 4px; |
|
|
|
transition: all .5s; |
|
|
|
border: 1px solid transparent; |
|
|
|
background: #FFFFFF; |
|
|
|
box-sizing: border-box; |
|
|
|
/* middle/middle_line_1 */ |
|
|
|
border: 1px solid #DFE2E6; |
|
|
|
padding: 14px 10px; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
} |
|
|
|
.combo-formItem { |
|
|
|
::v-deep { |
|
|
|
.form-item-bottom { |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
.select-trigger { |
|
|
|
background: #F6F7FA; |
|
|
|
border-color: transparent; |
|
|
|
} |
|
|
|
.service-title { |
|
|
|
/* body/body 2_regular */ |
|
|
|
font-family: Microsoft YaHei UI; |
|
|
|
font-size: 14px; |
|
|
|
font-weight: normal; |
|
|
|
line-height: normal; |
|
|
|
text-align: justify; /* 浏览器可能不支持 */ |
|
|
|
letter-spacing: 0.08em; |
|
|
|
/* text/text_1 */ |
|
|
|
color: #1E2226; |
|
|
|
height: 18px; |
|
|
|
} |
|
|
|
|
|
|
|
.is-open .select-trigger { |
|
|
|
border-color: #006AFF; |
|
|
|
} |
|
|
|
.service-desc { |
|
|
|
font-family: Microsoft YaHei UI; |
|
|
|
font-size: 12px; |
|
|
|
font-weight: normal; |
|
|
|
line-height: 17px; |
|
|
|
text-align: justify; /* 浏览器可能不支持 */ |
|
|
|
letter-spacing: 0.03em; |
|
|
|
/* text/text_4 */ |
|
|
|
color: #8A9099; |
|
|
|
margin-top: 14px; |
|
|
|
margin-bottom: 14px; |
|
|
|
flex: 1; |
|
|
|
height:34px; |
|
|
|
overflow: hidden; |
|
|
|
display: -webkit-box; |
|
|
|
-webkit-line-clamp: 2; |
|
|
|
-webkit-box-orient: vertical; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
} |
|
|
|
|
|
|
|
.el-input__inner { |
|
|
|
border-radius: 2px 0 0 2px; |
|
|
|
} |
|
|
|
} |
|
|
|
.self-drop-wrap { |
|
|
|
position: absolute; |
|
|
|
z-index: 1; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
.appendDrop { |
|
|
|
height: 38px; |
|
|
|
align-items: center; |
|
|
|
border-radius: 0 2px 2px 0; |
|
|
|
border: 1px solid #DFE2E6; |
|
|
|
border-left-color: transparent; |
|
|
|
justify-content: center; |
|
|
|
box-sizing: border-box; |
|
|
|
padding: 0 30px 0 12px; |
|
|
|
text-overflow: ellipsis; |
|
|
|
white-space: nowrap; |
|
|
|
overflow: hidden; |
|
|
|
&:hover { |
|
|
|
border: 1px solid #006AFF; |
|
|
|
} |
|
|
|
} |
|
|
|
.service-price { |
|
|
|
/* 自动布局子元素 */ |
|
|
|
height: 20px; |
|
|
|
/* 自动布局 */ |
|
|
|
display: flex; |
|
|
|
align-items: flex-end; |
|
|
|
padding: 0px; |
|
|
|
gap: 2px; |
|
|
|
z-index: 1; |
|
|
|
} |
|
|
|
.price { |
|
|
|
font-family: Microsoft YaHei UI; |
|
|
|
font-size: 20px; |
|
|
|
font-weight: normal; |
|
|
|
line-height: 20px; |
|
|
|
text-align: center; |
|
|
|
letter-spacing: normal; |
|
|
|
/* text/text_1 */ |
|
|
|
color: #1E2226; |
|
|
|
} |
|
|
|
.addStore { |
|
|
|
margin-top: 12px; |
|
|
|
// border-radius: 4px; |
|
|
|
// opacity: 1; |
|
|
|
// /* text/text_white_2 */ |
|
|
|
// border: 1px dashed #BABDC2; |
|
|
|
// padding: 15px 20px; |
|
|
|
// color: #626573; |
|
|
|
// justify-content: center; |
|
|
|
|
|
|
|
// img { |
|
|
|
// margin-right: 12px; |
|
|
|
// } |
|
|
|
.unit { |
|
|
|
font-family: Microsoft YaHei UI; |
|
|
|
font-size: 12px; |
|
|
|
font-weight: normal; |
|
|
|
line-height: 16px; |
|
|
|
text-align: right; |
|
|
|
letter-spacing: 0.08em; |
|
|
|
/* text/text_4 */ |
|
|
|
color: #8A9099; |
|
|
|
} |
|
|
|
|
|
|
|
.status-item { |
|
|
|
height: 22px; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
gap: 6px; |
|
|
|
z-index: 0; |
|
|
|
padding: 2px 10px; |
|
|
|
border-radius: 4px; |
|
|
|
|
|
|
|
.site-setting-wrap { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.siteMessage5_desc { |
|
|
|
border-radius: 4px; |
|
|
|
/* middle/middle_blue_1 */ |
|
|
|
background: #F2F7FF; |
|
|
|
/* middle/middle_blue_3 */ |
|
|
|
border: 1px solid #BFDAFF; |
|
|
|
padding: 8px 13px; |
|
|
|
margin-bottom: 32px; |
|
|
|
|
|
|
|
img { |
|
|
|
margin-right: 8px; |
|
|
|
} |
|
|
|
.divgreen { |
|
|
|
background: rgba(239, 255, 224, 0.5); |
|
|
|
box-sizing: border-box; |
|
|
|
border: 1px solid rgba(0, 194, 97, 0.6); |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
.fontgreen { |
|
|
|
font-family: Microsoft YaHei UI; |
|
|
|
font-size: 14px; |
|
|
|
font-weight: normal; |
|
|
|
line-height: normal; |
|
|
|
text-align: center; |
|
|
|
letter-spacing: 0.08em; |
|
|
|
color: #0DAF49; |
|
|
|
} |
|
|
|
|
|
|
|
#siteMessage2 { |
|
|
|
margin: 12px 0; |
|
|
|
.divblue { |
|
|
|
background: #F2F7FF; |
|
|
|
box-sizing: border-box; |
|
|
|
border: 1px solid #BFDAFF; |
|
|
|
} |
|
|
|
|
|
|
|
.domain-wrap { |
|
|
|
.domain-item { |
|
|
|
margin-bottom: 10px; |
|
|
|
} |
|
|
|
.fontblue { |
|
|
|
font-family: Microsoft YaHei UI; |
|
|
|
font-size: 14px; |
|
|
|
font-weight: normal; |
|
|
|
line-height: normal; |
|
|
|
text-align: center; |
|
|
|
letter-spacing: 0.08em; |
|
|
|
color: #006AFF; |
|
|
|
} |
|
|
|
|
|
|
|
.divred { |
|
|
|
background: #FFF1F0; |
|
|
|
box-sizing: border-box; |
|
|
|
border: 1px solid #FFA39E; |
|
|
|
} |
|
|
|
|
|
|
|
.domain-item p:last-child { |
|
|
|
padding-left: 23px; |
|
|
|
color: #8A9099; |
|
|
|
} |
|
|
|
.fontred { |
|
|
|
font-family: Microsoft YaHei UI; |
|
|
|
font-size: 14px; |
|
|
|
font-weight: normal; |
|
|
|
line-height: normal; |
|
|
|
text-align: center; |
|
|
|
letter-spacing: 0.08em; |
|
|
|
color: #FF4D4F; |
|
|
|
} |
|
|
|
|
|
|
|
p { |
|
|
|
text-align: left; |
|
|
|
line-height: 18px; |
|
|
|
margin-bottom: 8px; |
|
|
|
} |
|
|
|
.divgray { |
|
|
|
background: #F6F7FA; |
|
|
|
box-sizing: border-box; |
|
|
|
border: 1px solid #DFE2E6; |
|
|
|
} |
|
|
|
|
|
|
|
.domain-box { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: flex-start; |
|
|
|
} |
|
|
|
.fontgray { |
|
|
|
color: #626573; |
|
|
|
} |
|
|
|
|
|
|
|
.divorange { |
|
|
|
background: #FFFBF2; |
|
|
|
box-sizing: border-box; |
|
|
|
border: 1px solid rgba(251, 131, 45, 0.38); |
|
|
|
} |
|
|
|
|
|
|
|
.fontorange { |
|
|
|
color: #FB832D; |
|
|
|
} |
|
|
|
|
|
|
|
.divpurple { |
|
|
|
background: #F9F2FF; |
|
|
|
box-sizing: border-box; |
|
|
|
border: 1px solid rgba(126, 118, 253, 0.28); |
|
|
|
} |
|
|
|
|
|
|
|
.fontpurple { |
|
|
|
color: #6258FF; |
|
|
|
} |
|
|
|
|
|
|
|
.mr-8 { |
|
|
|
margin-right: 8px; |
|
|
|
} |
|
|
|
.mr-12 { |
|
|
|
margin-right: 12px; |
|
|
|
} |
|
|
|
.mr-20 { |
|
|
|
margin-right: 20px; |
|
|
|
} |
|
|
|
</style> |
