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