Skip to content

G
gs1
Commit b17cdd58 by 林家欣
Options

修改首页H5下标题超宽显示省略号

parent aaf0abf6
Showing with 247 additions and 237 deletions
src/assets/css/_mixin.scss
......@@ -334,9 +334,7 @@
// 超宽显示省略号
@mixin ellipsis {
@media screen and (min-width: 992px){
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
\ No newline at end of file
src/views/Home/comps/list.vue
<template>
<div class="list">
<div v-for="(tmp, i) in list" :key="i" class="row" @click="handelMsg">
<div class="col-lg-10 list-left">
<div class="col-9 col-lg-10 list-left">
<span></span>
<span>{{tmp.title}}</span>
<span :title="tmp.title">{{tmp.title}}</span>
</div>
<div class="col-lg-2 list-right">{{tmp.time}}</div>
<div class="col-3 col-lg-2 list-right">{{tmp.time}}</div>
</div>
<div class="row">
<div class="col">
......
src/views/Home/comps/list2.vue
......@@ -3,7 +3,7 @@
<div v-for="(tmp, i) in list" :key="i" class="row" @click="handelMsg">
<div class="col li">
<span></span>
<span>{{tmp.title}}</span>
<span :title="tmp.title">{{tmp.title}}</span>
</div>
</div>
</div>
......
src/views/Home/comps/other-list.vue
......@@ -3,7 +3,7 @@
<div v-for="(tmp, i) in list" :key="i" class="row" @click="handelMsg">
<div class="col li">
<span></span>
<span>{{tmp.name}}</span>
<span :title="tmp.name">{{tmp.name}}</span>
</div>
</div>
</div>
......
src/views/Home/comps/yyly-list.vue
......@@ -3,7 +3,7 @@
<div v-for="(tmp, i) in list" :key="i" class="row" @click="handelMsg">
<div class="col li">
<span></span>
<span>{{tmp.name}}</span>
<span :title="tmp.name">{{tmp.name}}</span>
</div>
</div>
</div>
......
src/views/Home/index.vue
......@@ -118,222 +118,220 @@
</div>
<!-- 业务大厅、定制服务 -->
<div class="container">
<div class="padding30">
<div class="row">
<div class="col-lg-6">
<div class="ywdt">
<div class="cate">业务大厅</div>
<div class="row">
<div class="col-lg-6 wbsxtcy bgWhite">
<div class="ywdt-cate ywdt-cate-bj1">
<span>我还不是系统成员</span>
<span>（企业初次申请）</span>
</div>
<button class="wbsxtcy-btn" @click="wysqsptmHandelClick">
我要申请商品条码
</button>
<div class="row ywdt-kj">
<div
class="col-6"
v-for="(tmp, i) in whbsxtcy"
:key="i"
@click="whbsxtcyHandelClick(i)"
>
<div class="ywdt-tp">
<img :src="tmp.ico" alt="" />
</div>
<div class="ywdt-bt">{{ tmp.name }}</div>
<div class="row">
<div class="col-lg-6">
<div class="ywdt">
<div class="cate">业务大厅</div>
<div class="row">
<div class="col-lg-6 wbsxtcy bgWhite">
<div class="ywdt-cate ywdt-cate-bj1">
<span>我还不是系统成员</span>
<span>（企业初次申请）</span>
</div>
<button class="wbsxtcy-btn" @click="wysqsptmHandelClick">
我要申请商品条码
</button>
<div class="row ywdt-kj">
<div
class="col-6"
v-for="(tmp, i) in whbsxtcy"
:key="i"
@click="whbsxtcyHandelClick(i)"
>
<div class="ywdt-tp">
<img :src="tmp.ico" alt="" />
</div>
<div class="ywdt-bt">{{ tmp.name }}</div>
</div>
</div>
<div class="col-lg-6 wsxtcy bgWhite">
<div class="ywdt-cate ywdt-cate-bj2">
<span>我是系统成员</span>
<span>（成员专区）</span>
</div>
<div class="row ywdt-kj">
<div
class="col-6"
v-for="(tmp, i) in wsxtcy"
:key="i"
@click="wsxtcyHandelClick(i)"
>
<div class="ywdt-tp">
<img :src="tmp.ico" alt="" />
</div>
<div class="ywdt-bt">{{ tmp.name }}</div>
</div>
<div class="col-lg-6 wsxtcy bgWhite">
<div class="ywdt-cate ywdt-cate-bj2">
<span>我是系统成员</span>
<span>（成员专区）</span>
</div>
<div class="row ywdt-kj">
<div
class="col-6"
v-for="(tmp, i) in wsxtcy"
:key="i"
@click="wsxtcyHandelClick(i)"
>
<div class="ywdt-tp">
<img :src="tmp.ico" alt="" />
</div>
<div class="ywdt-bt">{{ tmp.name }}</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 wsylqy bgWhite">
<div class="ywdt-cate ywdt-cate-bj1">
<span>我是医疗企业</span>
</div>
<div class="row ywdt-kj">
<div
class="col-6"
v-for="(tmp, i) in wsylqy"
:key="i"
@click="wsylqyHandelClick(i)"
>
<div class="ywdt-tp">
<img :src="tmp.ico" alt="" />
</div>
<div class="ywdt-bt">{{ tmp.name }}</div>
</div>
<div class="row">
<div class="col-lg-6 wsylqy bgWhite">
<div class="ywdt-cate ywdt-cate-bj1">
<span>我是医疗企业</span>
</div>
<div class="row ywdt-kj">
<div
class="col-6"
v-for="(tmp, i) in wsylqy"
:key="i"
@click="wsylqyHandelClick(i)"
>
<div class="ywdt-tp">
<img :src="tmp.ico" alt="" />
</div>
<div class="ywdt-bt">{{ tmp.name }}</div>
</div>
</div>
<div class="col-lg-6 kjywblzq bgWhite">
<div class="ywdt-cate ywdt-cate-bj2">
<span>跨境业务办理专区</span>
</div>
<div class="row ywdt-kj">
<div
class="col-6"
v-for="(tmp, i) in kjywblzq"
:key="i"
@click="kjywblzqHandelClick(i)"
>
<div class="ywdt-tp">
<img :src="tmp.ico" alt="" />
</div>
<div class="ywdt-bt">{{ tmp.name }}</div>
</div>
<div class="col-lg-6 kjywblzq bgWhite">
<div class="ywdt-cate ywdt-cate-bj2">
<span>跨境业务办理专区</span>
</div>
<div class="row ywdt-kj">
<div
class="col-6"
v-for="(tmp, i) in kjywblzq"
:key="i"
@click="kjywblzqHandelClick(i)"
>
<div class="ywdt-tp">
<img :src="tmp.ico" alt="" />
</div>
<div class="ywdt-bt">{{ tmp.name }}</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="dzfw">
<div class="cate">定制服务</div>
<div class="bgWhite container">
<div class="row">
<template v-for="(tmp, i) in dzfw">
<div
class="col-6 col-lg-4 dzfw-li"
:key="i"
v-if="tmp.isChecked"
@click="dzfwHandelClick(i)"
>
<div class="dzfw-border">
<div class="dzfw-tp">
<img :src="tmp.ico" alt="" />
</div>
<div class="dzfw-bt">{{ tmp.name }}</div>
</div>
<div class="col-lg-6">
<div class="dzfw">
<div class="cate">定制服务</div>
<div class="bgWhite container">
<div class="row">
<template v-for="(tmp, i) in dzfw">
<div
class="col-6 col-lg-4 dzfw-li"
:key="i"
v-if="tmp.isChecked"
@click="dzfwHandelClick(i)"
>
<div class="dzfw-border">
<div class="dzfw-tp">
<img :src="tmp.ico" alt="" />
</div>
<div class="dzfw-bt">{{ tmp.name }}</div>
</div>
</template>
</div>
</div>
</template>
</div>
</div>
</div>
</div>
<div class="bgWhite marginTop10 padding18">
<div class="container">
<ul class="nav nav-tabs tabs2 row" id="myTab" role="tablist">
<li class="nav-item col-lg-2" role="presentation">
<button
class="nav-link active"
id="home-tab"
data-bs-toggle="tab"
data-bs-target="#csxx"
type="button"
role="tab"
aria-controls="home"
aria-selected="true"
>
<span>厂商信息</span>
</button>
</li>
<li class="nav-item col-lg-2" role="presentation">
<button
class="nav-link"
id="profile-tab"
data-bs-toggle="tab"
data-bs-target="#cpxx"
type="button"
role="tab"
aria-controls="profile"
aria-selected="false"
>
<span>产品信息</span>
</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div
class="tab-pane fade show active"
id="csxx"
role="tabpanel"
aria-labelledby="home-tab"
</div>
<div class="bgWhite marginTop10 padding18">
<div class="container">
<ul class="nav nav-tabs tabs2 row" id="myTab" role="tablist">
<li class="nav-item col-lg-2" role="presentation">
<button
class="nav-link active"
id="home-tab"
data-bs-toggle="tab"
data-bs-target="#csxx"
type="button"
role="tab"
aria-controls="home"
aria-selected="true"
>
<div class="chaxun">
<div class="chaxun-kj">
<div class="row">
<div class="col-lg-2 chaxun-left">
<el-select
v-model="chaxun.type"
placeholder="请选择"
clearable
>
<el-option
v-for="(item, i) in chaxun.options"
:key="i"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="col-lg-7 chaxun-middle">
<el-input
placeholder="请输入厂商名称"
v-model="chaxun.keywords"
clearable
<span>厂商信息</span>
</button>
</li>
<li class="nav-item col-lg-2" role="presentation">
<button
class="nav-link"
id="profile-tab"
data-bs-toggle="tab"
data-bs-target="#cpxx"
type="button"
role="tab"
aria-controls="profile"
aria-selected="false"
>
<span>产品信息</span>
</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div
class="tab-pane fade show active"
id="csxx"
role="tabpanel"
aria-labelledby="home-tab"
>
<div class="chaxun">
<div class="chaxun-kj">
<div class="row">
<div class="col-lg-2 chaxun-left">
<el-select
v-model="chaxun.type"
placeholder="请选择"
clearable
>
<el-option
v-for="(item, i) in chaxun.options"
:key="i"
:label="item.label"
:value="item.value"
>
</el-input>
</div>
<div class="col-lg-3 chaxun-right">
<button>境内条码查询</button>
</div>
</el-option>
</el-select>
</div>
<div class="col-lg-7 chaxun-middle">
<el-input
placeholder="请输入厂商名称"
v-model="chaxun.keywords"
clearable
>
</el-input>
</div>
<div class="col-lg-3 chaxun-right">
<button>境内条码查询</button>
</div>
</div>
</div>
</div>
<div
class="tab-pane fade"
id="cpxx"
role="tabpanel"
aria-labelledby="profile-tab"
>
<div class="chaxun">
<div class="chaxun-kj">
<div class="row">
<div class="col-lg-2 chaxun-left">
<el-select v-model="chaxun.type" placeholder="请选择">
<el-option
v-for="(item, i) in chaxun.options"
:key="i"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="col-lg-7 chaxun-middle">
<el-input
placeholder="请输入厂商名称"
v-model="chaxun.keywords"
clearable
</div>
<div
class="tab-pane fade"
id="cpxx"
role="tabpanel"
aria-labelledby="profile-tab"
>
<div class="chaxun">
<div class="chaxun-kj">
<div class="row">
<div class="col-lg-2 chaxun-left">
<el-select v-model="chaxun.type" placeholder="请选择">
<el-option
v-for="(item, i) in chaxun.options"
:key="i"
:label="item.label"
:value="item.value"
>
</el-input>
</div>
<div class="col-lg-3 chaxun-right">
<button>境内条码查询</button>
</div>
</el-option>
</el-select>
</div>
<div class="col-lg-7 chaxun-middle">
<el-input
placeholder="请输入厂商名称"
v-model="chaxun.keywords"
clearable
>
</el-input>
</div>
<div class="col-lg-3 chaxun-right">
<button>境内条码查询</button>
</div>
</div>
</div>
......@@ -1165,8 +1163,7 @@ export default {
&.slick-prev {
left: 0;
&::before {
background: url("../../assets/image/home/prevArrow-hover.png")
no-repeat;
background: url("../../assets/image/home/prevArrow-hover.png") no-repeat;
background-size: 100% 100%;
content: "";
}
......@@ -1183,8 +1180,7 @@ export default {
display: flex;
justify-content: flex-end;
&::before {
background: url("../../assets/image/home/nextArrow-hover.png")
no-repeat;
background: url("../../assets/image/home/nextArrow-hover.png") no-repeat;
background-size: 100% 100%;
content: "";
}
......@@ -1259,9 +1255,9 @@ export default {
&::before {
width: 9px;
height: 14px;
// background: url("../../assets/image/home/prevArrow-hover.png")
// no-repeat;
// background-size: 100% 100%;
// background: url("../../assets/image/home/prevArrow-hover.png")
// no-repeat;
// background-size: 100% 100%;
}
}
&.slick-next {
......@@ -1269,9 +1265,9 @@ export default {
&::before {
width: 9px;
height: 14px;
// background: url("../../assets/image/home/nextArrow-hover.png")
// no-repeat;
// background-size: 100% 100%;
// background: url("../../assets/image/home/nextArrow-hover.png")
// no-repeat;
// background-size: 100% 100%;
}
}
img {
......@@ -1293,8 +1289,8 @@ export default {
width: 24px;
height: 50px;
background: url("../../assets/image/home/prevArrow-hover2.png")
no-repeat;
background-size: 100% 100%;
no-repeat;
background-size: 100% 100%;
}
}
&.slick-next {
......@@ -1303,8 +1299,8 @@ export default {
width: 24px;
height: 50px;
background: url("../../assets/image/home/nextArrow-hover2.png")
no-repeat;
background-size: 100% 100%;
no-repeat;
background-size: 100% 100%;
}
}
}
......@@ -1325,6 +1321,9 @@ export default {
}
}
}
.cate {
margin: 30px 0;
}
.ywzxdfgj {
padding: 30px 0;
}
......@@ -1339,15 +1338,23 @@ export default {
.newsBanner {
width: 90.5%;
height: 431px !important;
.newsBannerB {
.newsBanner-title {
font-size: 18px;
}
}
}
.home-bottom-cont {
> div {
width: 24.4%;
}
}
.spqqsfz-cont-left {
.spqqsfz-cont-left-tp {
position: absolute;
.spqqsfz {
margin-top: 30px;
.spqqsfz-cont-left {
.spqqsfz-cont-left-tp {
position: absolute;
}
}
}
}
......@@ -1358,6 +1365,16 @@ export default {
line-height: 30px;
}
}
.newsBanner {
.newsBannerB {
.newsBanner-title {
font-size: 13px;
}
}
}
.cate {
margin: 20px 0;
}
.dzfwDialog-width {
width: 140px;
margin: 0 auto;
......@@ -1367,6 +1384,7 @@ export default {
width: 120px;
}
.spqqsfz {
margin-top: 20px;
.spqqsfz-cont-right {
background: #e25020 !important;
}
......@@ -1387,7 +1405,7 @@ export default {
.banner-item {
height: 100%;
position: relative;
.banner-tp{
.banner-tp {
position: absolute;
top: 0;
left: 0;
......@@ -1415,7 +1433,7 @@ export default {
height: 37px;
display: flex;
align-items: center;
background: #0E2C6B;
background: #0e2c6b;
border-radius: 4px;
font-size: 16px;
color: #ffffff;
......@@ -1424,19 +1442,19 @@ export default {
margin-left: 18px;
}
&:hover {
background: #061A4D;
background: #061a4d;
img {
right: 17px;
}
}
&:focus {
background: #0E2C6B;
background: #0e2c6b;
img {
right: 20px;
}
}
&:active {
background: #061A4D;
background: #061a4d;
img {
right: 17px;
}
......@@ -1461,12 +1479,6 @@ export default {
.padding18 {
padding: 18px 0;
}
.padding40 {
padding: 40px 0;
}
.padding30 {
padding: 30px 0;
}
.marginTop10 {
margin-top: 10px;
}
......@@ -1495,13 +1507,12 @@ export default {
display: flex;
align-items: center;
.newsBanner-title {
font-size: 18px;
height: 100%;
height: 50px;
width: 100%;
text-align: center;
line-height: 50px;
color: rgba(255, 255, 255, 1);
display: flex;
align-items: center;
flex: 1;
justify-content: center;
@include ellipsis;
}
}
}
......@@ -1564,7 +1575,6 @@ export default {
.cate {
color: #0e2c6b;
font-size: 18px;
margin-bottom: 30px;
font-weight: 600;
// font-family: PingFangSC-Medium, PingFang SC;
}
......@@ -1805,7 +1815,7 @@ export default {
height: 41px;
display: flex;
align-items: center;
background: #0E2C6B;
background: #0e2c6b;
border-radius: 4px;
color: #fff;
font-size: 18px;
......@@ -1814,19 +1824,19 @@ export default {
margin-left: 18px;
}
&:hover {
background: #061A4D;
background: #061a4d;
img {
right: 17px;
}
}
&:active {
background: #061A4D;
background: #061a4d;
img {
right: 17px;
}
}
&:focus {
background: #0E2C6B;
background: #0e2c6b;
img {
right: 20px;
}
......
src/views/Org/Branch.vue
......@@ -91,6 +91,7 @@ export default {
"吉林分中心",
"长春分中心",
"黑龙江分中心",
"哈尔滨分中心",
],
},
{
......
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