diff --git a/src/view/pc/rankList.vue b/src/view/pc/rankList.vue index cbee0e13f06a99176a8803ab45114872831d562d..b9ce36faef52b21b474c7e16492426d0ab575597 100644 --- a/src/view/pc/rankList.vue +++ b/src/view/pc/rankList.vue @@ -18,7 +18,7 @@ <p>全国</p> </div> --> <el-dropdown v-if="city&&!userItem" trigger="click" class="dropdown" @visible-change="(val)=>{cityFlag = val}" @command="dropdownFn" :hide-on-click="true"> - <p>地区:<span style="font-size: 16px;">{{city}}</span> <i :class="!cityFlag?'el-icon-arrow-down':'el-icon-arrow-up'"></i> </p> + <p><span>地区:</span><span style="font-size: 16px;">{{city}}</span> <i :class="!cityFlag?'el-icon-arrow-down':'el-icon-arrow-up'"></i> </p> <el-dropdown-menu class="rank-dropdown" slot="dropdown" > <el-dropdown-item :command="it" v-for="(it,index) in dropdownList" :key="index">{{it}}</el-dropdown-item> @@ -120,6 +120,12 @@ export default { height: 36px; text-align: center; color: #77C0FF; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + word-break: break-all; &:focus{ background: #2E4974; } @@ -194,6 +200,17 @@ export default { max-width: 200px; font-size: 16px; color:#77C0FF ; + span{ + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + word-break: break-all; + } + &>span:nth-child(1){ + width: 70px; + } cursor: pointer; img { width: 18px; diff --git a/src/view/wap/rankList.vue b/src/view/wap/rankList.vue index d864a4135a970497477086a03d64df62cc349dc3..13990ecd26f1986cf6b2fe1d0dc92166bc8e17d8 100644 --- a/src/view/wap/rankList.vue +++ b/src/view/wap/rankList.vue @@ -6,7 +6,7 @@ <div class="rank-list"> <div class="title"> <span>{{ title }}</span> - <p v-if="city&&!userItem" @click="show=true" class="text">地区:<span style="color: #fff;">{{city}}</span><img src="@/assets/img/wap-down.png" alt="" /></p> + <p v-if="city&&!userItem" @click="show=true" class="text"><span>地区:</span><span style="color: #fff;">{{city}}</span><img src="@/assets/img/wap-down.png" alt="" /></p> <p v-if="userItem"><img src="@/assets/img/user-wap.png" alt="" /><a target="_blank" :href="`https://blog.csdn.net/${userItem.username}`">{{userItem.nickname||userItem.username}}</a></p> </div> <div class="rank-list-nav border"> @@ -153,14 +153,24 @@ export default { font-size: 14px; font-weight: 500; color: #b2bccf; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + word-break: break-all; } .clear{ cursor: pointer; } p { + // flex: 1; display: flex; align-items: center; max-width: 150px; + &>span:nth-child(1){ + width: 50px; + } &.text img{ width: 14px; height: 14px;