Commit f9201785 authored by youjie's avatar youjie

优化文案超出

parent be1e9cb3
...@@ -632,6 +632,13 @@ export default { ...@@ -632,6 +632,13 @@ export default {
.MenuListBox li{ .MenuListBox li{
width: 81px; width: 81px;
padding-bottom: 15px; padding-bottom: 15px;
max-height: 145px;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
} }
.MenuListItem{ .MenuListItem{
position: absolute; position: absolute;
...@@ -693,6 +700,14 @@ export default { ...@@ -693,6 +700,14 @@ export default {
line-height: 23px; line-height: 23px;
color: rgb(255,255,255); color: rgb(255,255,255);
transition: all .5s; transition: all .5s;
display: inline-block;
max-height: 150px;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
} }
.SubMenuListText:hover{ .SubMenuListText:hover{
color: $secondary; color: $secondary;
......
...@@ -363,10 +363,9 @@ ...@@ -363,10 +363,9 @@
.swipercomTitleL{ .swipercomTitleL{
color: rgb(5,23,50); color: rgb(5,23,50);
max-width: 226px; max-width: 226px;
white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap;
} }
.swipercomTitleR{ .swipercomTitleR{
font-size: 16px; font-size: 16px;
...@@ -374,6 +373,12 @@ ...@@ -374,6 +373,12 @@
overflow: hidden; overflow: hidden;
letter-spacing: 4px; letter-spacing: 4px;
line-height: 30px; line-height: 30px;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
} }
.sliderRight{ .sliderRight{
z-index: 1; z-index: 1;
...@@ -443,6 +448,9 @@ ...@@ -443,6 +448,9 @@
} }
.swipercomSubEn{ .swipercomSubEn{
color: $secondary; color: $secondary;
max-height: 100%;
overflow: hidden;
text-overflow: ellipsis;
} }
.swipercomSubEnLen::before{ .swipercomSubEnLen::before{
background: url(../../assets/img/home/radius-white.svg) 50%/cover no-repeat; background: url(../../assets/img/home/radius-white.svg) 50%/cover no-repeat;
......
...@@ -469,8 +469,9 @@ ...@@ -469,8 +469,9 @@
color: $secondary; color: $secondary;
z-index: 2; z-index: 2;
} }
.swipercomTvR2BjBox{ .swipercomSubEnLenR2 span{
max-height: 100%;
overflow: hidden;
} }
.swipercomTvR2Bj{ .swipercomTvR2Bj{
background: linear-gradient(0deg,#000,transparent); background: linear-gradient(0deg,#000,transparent);
...@@ -488,10 +489,24 @@ ...@@ -488,10 +489,24 @@
} }
.swipercomTitleLR2{ .swipercomTitleLR2{
font-size: 1.5rem; font-size: 1.5rem;
width: 100%;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
} }
.swipercomDesR2{ .swipercomDesR2{
font-size: 1.1rem; font-size: 1.1rem;
padding: 15px 0; padding: 15px 0;
max-height: 109px;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
} }
.swipercomIconR2{ .swipercomIconR2{
top: 1px; top: 1px;
......
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
:style="{'background-color':windowWidth>=992?plugData.BgColor:''}" :style="{'background-color':windowWidth>=992?plugData.BgColor:''}"
:class="[windowWidth>=992?'h-66':'',]"> :class="[windowWidth>=992?'h-66':'',]">
<p class="font-serifEn text-primary" <p class="font-serifEn text-primary"
:class="[windowWidth>=992?'writing-modes-vertical':'min-w-45',]" :class="[windowWidth>=992?'writing-modes-vertical':'min-w-45',$q.platform.is.desktop?'desktop':'moblie']"
:style="{'background-color':windowWidth>=992?'':plugData.BgColor}"><span class="opacity-80 textOverEllipsis">{{item.SubName}}</span></p> :style="{'background-color':windowWidth>=992?'':plugData.BgColor}"><span class="opacity-80 textOverEllipsis">{{item.SubName}}</span></p>
<div class="inSliSubNameList isDisplay relative" v-if="windowWidth>=992"> <div class="inSliSubNameList isDisplay relative" v-if="windowWidth>=992">
<span class="absolute inSliSubNameListL block">{{index>9?index+1:'0'+(index+1)}}</span> <span class="absolute inSliSubNameListL block">{{index>9?index+1:'0'+(index+1)}}</span>
...@@ -83,7 +83,7 @@ ...@@ -83,7 +83,7 @@
:class="[windowWidth>=992?'absolute row':' column']"> :class="[windowWidth>=992?'absolute row':' column']">
<p class="text-center font-serifEn <p class="text-center font-serifEn
row text-color85 opacity-80" row text-color85 opacity-80"
:class="[windowWidth>=992?'writing-modes-vertical text-left justify-end items-end':'text-center']" :class="[windowWidth>=992?'writing-modes-vertical text-left justify-end items-end':'text-center',$q.platform.is.desktop?'desktop':'moblie']"
> >
<!-- {{item.SubDescribe}} --> <!-- {{item.SubDescribe}} -->
<!-- <span v-if="windowWidth>=992" v-html="item.SubDescribe"></span> --> <!-- <span v-if="windowWidth>=992" v-html="item.SubDescribe"></span> -->
...@@ -313,6 +313,13 @@ export default { ...@@ -313,6 +313,13 @@ export default {
font-size: 1rem; font-size: 1rem;
line-height: 35px; line-height: 35px;
opacity: .8; opacity: .8;
max-height: 193px;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
} }
.indexSlider-right{ .indexSlider-right{
width: 75%; width: 75%;
...@@ -384,7 +391,19 @@ export default { ...@@ -384,7 +391,19 @@ export default {
} }
.inSliSubNameBox p{ .inSliSubNameBox p{
color: rgb(32,25,50); color: rgb(32,25,50);
}
.inSliSubNameBox p.desktop{
max-width: 50px;
height: 78%;
overflow: hidden;
word-spacing: nowrap;
text-overflow: ellipsis;
}
.inSliSubNameBox p.moblie{
max-width: 100%;
overflow: hidden;
word-spacing: nowrap;
text-overflow: ellipsis;
} }
.indexSliderContainer.active .inSliSubNameBox p{ .indexSliderContainer.active .inSliSubNameBox p{
font-size: 1.3rem; font-size: 1.3rem;
...@@ -450,6 +469,25 @@ export default { ...@@ -450,6 +469,25 @@ export default {
opacity: .9; opacity: .9;
line-height: 2.18rem; line-height: 2.18rem;
} }
.inSliSubDescribeBox p.desktop{
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.inSliSubDescribeBox p.moblie{
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
overflow: hidden;
}
.indexSliderContainer.active .inSliSubDescribeBox p.moblie{
height: 11rem;
}
.indexSliderContainer.active .inSliSubDescribeBox p{ .indexSliderContainer.active .inSliSubDescribeBox p{
width: 100%; width: 100%;
margin-left: 0; margin-left: 0;
......
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