bonus
/
bonus-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

样式

This commit is contained in:
bb_pan 2025-11-24 18:27:40 +08:00
parent cfbe0e496b
commit 4396ba582d
20 changed files with 277 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/views/screen/gwScreen/components/left/index.vue
View File

@ -231,9 +231,10 @@ export default {
padding-top: 8px;
padding-left: 40px;
font-family: DS-TITLE;
background: linear-gradient(to bottom, #f0f5f8, #5eb6f0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background: linear-gradient(180deg, #FFF 19.35%, #5DCBFE 77.42%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
.more {
margin-right: 20px;

7
src/views/screen/gwScreen/components/right/ProEquipSituationList.vue
View File

@ -176,9 +176,10 @@ export default {
padding-left: 45px;
font-family: DS-TITLE;
.title-text {
background: linear-gradient(to bottom, #f0f5f8, #5eb6f0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background: linear-gradient(180deg, #FFF 19.35%, #5DCBFE 77.42%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.more {

7
src/views/screen/gwScreen/components/right/index.vue
View File

@ -134,9 +134,10 @@ export default {
padding-top: 10px;
padding-left: 45px;
font-family: DS-TITLE;
background: linear-gradient(to bottom, #f0f5f8, #5eb6f0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background: linear-gradient(180deg, #FFF 19.35%, #5DCBFE 77.42%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
.more {
margin-right: 20px;

14
src/views/screen/wsScreen/components/center/index.vue
View File

@ -312,7 +312,7 @@ export default {
animationEasingUpdate: 'cubicInOut', // 过渡动画的缓动效果。[ default: cubicInOut ]
},
label: {
show: true,
show: false,
color: '#FFF',
position: 'top',
fontSize: 18,
@ -456,13 +456,19 @@ export default {
display: flex;
justify-content: center;
.btn:not(:last-child) {
margin-right: 80px;
margin-right: 22px;
}
.btn {
font-size: 18px;
margin-top: 40px;
width: 84px;
height: 30px;
font-size: 13px;
text-align: center;
padding: 6px 15px;
/* padding: 6px 15px; */
display: flex;
justify-content: center;
align-items: center;
font-family: DS-TITLE;
color: #ccc;
background-image: url('../../img/btn.png');

11
src/views/screen/wsScreen/components/left/EquipItem.vue
View File

@ -75,6 +75,7 @@ export default {
const myChart = echarts.init(chartDom)
const option = {
color: ['#69A6C9', '#7DDBBA', '#6DD48C'],
tooltip: {
trigger: 'item',
},
@ -87,7 +88,8 @@ export default {
label: {
show: true,
formatter: '{b}\n{d}%',
color: '#A3D6F8',
color: 'inherit',
fontWeight: '900',
},
labelLine: {
show: true,
@ -112,7 +114,11 @@ export default {
<style lang="scss" scoped>
.title {
height: 30px;
display: flex;
align-items: center;
padding-left: 10px;
font-size: 12px;
font-weight: 800;
background-image: url('../../img/equip-title.png');
background-size: 100% 100%;
@ -120,7 +126,8 @@ export default {
cursor: pointer;
}
.number {
font-size: 16px;
font-size: 18px;
font-weight: 800;
background: linear-gradient(to bottom, #f0f5f8, #5eb6f0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

59
src/views/screen/wsScreen/components/left/EquipStatus.vue
View File

@ -49,10 +49,56 @@ export default {
const yData = this.chartData.map((item) => item.value)
const option = {
title: [
{
text: '单位：台',
left: '5%',
top: 0,
textStyle: {
color: '#ccc',
fontSize: 12,
},
},
],
graphic: [
{
type: 'group',
right: '6%', // 右边距
top: 0, // 顶部距离
children: [
{
type: 'rect',
z: 100,
left: 0,
top: 3.5,
shape: {
width: 10,
height: 5,
},
style: {
fill: '#3BA9DC', // 你想要的色块颜色
stroke: null,
},
},
{
type: 'text',
z: 100,
left: 20,
top: 0,
style: {
text: '装备状态数',
fill: '#ccc',
font: '12px sans-serif',
},
},
],
},
],
grid: {
left: '16%',
right: '6%',
top: '16%',
top: '12%',
bottom: '15%',
},
xAxis: {
@ -62,7 +108,7 @@ export default {
axisLabel: {
interval: 0,
color: '#ccc',
fontSize: 12,
fontSize: 14,
margin: 10,
},
},
@ -72,7 +118,7 @@ export default {
axisLine: { show: true },
axisLabel: {
color: '#ccc',
fontSize: 12,
fontSize: 14,
},
},
series: [
@ -96,8 +142,9 @@ export default {
label: {
show: true,
position: 'top',
fontSize: 12,
color: '#ccc',
fontSize: 16,
fontWeight: 'bold',
color: '#96C2D8',
formatter: (params) => {
const proportion = this.chartData[params.dataIndex].proportion
return `${params.value}/${proportion}%`
@ -141,7 +188,7 @@ export default {
<style lang="scss" scoped>
.chart-container {
width: 100%; /* 宽度 */
height: 230px; /* 高度 */
height: 200px; /* 高度 */
margin: 0 auto;
}
</style>

77
src/views/screen/wsScreen/components/left/UnitEquipmentConfig.vue
View File

@ -1,17 +1,15 @@
<template>
<div class="scroll-container">
<table cellspacing="0" cellpadding="8" style="width: 100%; border-collapse: collapse; text-align: center">
<!-- 双层表头 -->
<!-- 表头 -->
<table class="table-head">
<thead>
<!-- 第一行：跨列合并 -->
<tr>
<th rowspan="2">序号</th>
<th rowspan="2">单位名称</th>
<th rowspan="2">装备价值（亿元）</th>
<th rowspan="2" style="width: 30px">序号</th>
<th rowspan="2" style="width: 110px">单位名称</th>
<th rowspan="2" style="width: 60px">装备价值（亿元）</th>
<th colspan="4">装备数量（台）</th>
<th colspan="4">配置率</th>
</tr>
<!-- 第二行：子列 -->
<tr>
<th>总数</th>
<th>线路</th>
@ -23,25 +21,25 @@
<th>电缆</th>
</tr>
</thead>
</table>
<!-- 表体：使用 v-for 渲染数据 -->
<!-- 内容 -->
<table class="table-body">
<tbody>
<tr v-for="(row, index) in tableData" :key="index">
<td style="width: 60px">{{ index + 1 }}</td>
<td style="width: 180px">{{ row.deptName }}</td>
<td style="width: 110px">{{ row.totalValue ? (row.totalValue / 100000000).toFixed(4) : 0 }}</td>
<td class="index-num" style="width: 30px">{{ index + 1 }}</td>
<td style="width: 110px; font-size: 14px">{{ row.deptName }}</td>
<td class="index-num" style="width: 60px">{{ row.totalValue ? (row.totalValue / 100000000).toFixed(4) : 0 }}</td>
<!-- 装备数量 -->
<td>{{ row.totalEquipmentQuantity }}</td>
<td>{{ row.lineNum }}</td>
<td>{{ row.substationNum }}</td>
<td>{{ row.cableNum }}</td>
<td class="index-num">{{ row.totalEquipmentQuantity }}</td>
<td class="index-num">{{ row.lineNum }}</td>
<td class="index-num">{{ row.substationNum }}</td>
<td class="index-num">{{ row.cableNum }}</td>
<!-- 配置率 -->
<td>{{ row.configRate }}</td>
<td>{{ row.valueA }}</td>
<td>{{ row.valueB }}</td>
<td>{{ row.valueC }}</td>
<td class="index-num">{{ row.configRate }}</td>
<td class="index-num">{{ row.valueA }}</td>
<td class="index-num">{{ row.valueB }}</td>
<td class="index-num">{{ row.valueC }}</td>
</tr>
</tbody>
</table>
@ -67,6 +65,7 @@ export default {
console.log('🚀 ~ getList ~ res:', res)
if (!res.data) return
this.tableData = res.data || []
if (this.tableData.length > 3) this.tableData = this.tableData.slice(0, 3)
} catch (error) {
console.log('🚀 ~ getList ~ error:', error)
}
@ -76,8 +75,26 @@ export default {
</script>
<style lang="scss" scoped>
table {
.table-head {
width: 100%;
border-collapse: collapse;
}
.table-body {
width: 100%;
border-collapse: separate;
border-spacing: 0 5px;
}
.index-num {
/* width: 30px; */
font-size: 18px;
font-weight: 800;
background: linear-gradient(to bottom, #f0f5f8, #5eb6f0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: 'DIN';
}
table {
width: 100%;
font-family: 'Alibaba-PuHuiTi-Regular';
font-size: 11px;
@ -85,10 +102,10 @@ table {
th,
td {
padding: 9px 3px;
/* padding: 9px 3px; */
text-align: center;
white-space: nowrap;
/* border: 1px solid rgba(255, 255, 255, 0.3); // 边框颜色可根据背景调整 */
/* white-space: nowrap; */
border: 0.5px solid #254e7c; // 边框颜色可根据背景调整
}
th {
@ -99,11 +116,15 @@ th {
thead {
background-image: url('../../img/tableHeader.png');
background-size: 100% 100%;
height: 57px;
font-size: 12px;
color: #5A89BE;
}
tbody tr {
background-image: url('../../img/tableTr.png');
background-size: 100% 100%;
height: 44px;
}
/* 奇偶行颜色区分 */
@ -121,13 +142,13 @@ tbody tr:hover {
overflow: auto;
/* 隐藏滚动条轨迹 */
-ms-overflow-style: none; /* IE / Edge */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE / Edge */
scrollbar-width: none; /* Firefox */
}
/* Chrome / Safari */
.scroll-container::-webkit-scrollbar {
width: 0; /* 或者直接隐藏 */
width: 0; /* 或者直接隐藏 */
height: 0;
background: transparent; /* 背景透明 */
}

134
src/views/screen/wsScreen/components/left/index.vue
View File

@ -2,30 +2,40 @@
<div>
<div class="left-warp">
<div class="top-box">
<div class="title-tip">
<div>装备总览</div>
<div class="more" @click="handleEquipOverview">更多 ></div>
<div class="title-tip title-all" @click="handleEquipOverview">
<!-- <div>装备总览</div>
<div class="more" @click="handleEquipOverview">更多 ></div> -->
</div>
<div class="equip-box">
<div style="display: flex; flex-direction: column; align-items: center">
<div class="equip-item-1">装备总数</div>
<div class="equip-item-2" @click="openSystemEquip">{{ equipData.total }} <span class="unit">台</span></div>
<div @click="openSystemEquip">
<span class="equip-item-2 num-text">{{ equipData.total }}</span
><span class="unit">台</span></div
>
</div>
<div style="display: flex; flex-direction: column; align-items: center">
<div style="display: flex; flex-direction: column; align-items: center; margin-left: 15px">
<div class="equip-item-3">总价值</div>
<div class="equip-item-4" @click="openTotalPrice"
>{{ (equipData.totalPrice / 100000000).toFixed(4) }} <span class="unit">亿元</span></div
<div @click="openTotalPrice">
<span class="equip-item-4 num-text">{{ (equipData.totalPrice / 100000000).toFixed(4) }}</span>
<span class="unit">亿元</span></div
>
</div>
</div>
</div>
<div class="item-box">
<el-row :gutter="20">
<el-row :gutter="3">
<el-col :span="8" :offset="0">
<EquipItem title="线路装备" :state="state1" :pieValues="list1" @openDialog="openEquipItemMore(2)" />
</el-col>
<el-col :span="8" :offset="0">
<EquipItem title="变电装备" :state="state2" :pieValues="list2" @openDialog="openEquipItemMore(1)" />
<div style="display: flex; align-items: center">
<div class="item-line"></div>
<div style="margin: 0 4px;">
<EquipItem title="变电装备" :state="state2" :pieValues="list2" @openDialog="openEquipItemMore(1)" />
</div>
<div class="item-line"></div>
</div>
</el-col>
<el-col :span="8" :offset="0">
<EquipItem title="电缆装备" :state="state3" :pieValues="list3" @openDialog="openEquipItemMore(3)" />
@ -34,9 +44,9 @@
</div>
<div class="bottom-box">
<div class="bottom-left">
<div class="title-tip">
<div class="tip-title">单位装备配置</div>
<div class="more" @click="openEquipConfig">更多 ></div>
<div class="title-tip title-equip" @click="openEquipConfig">
<!-- <div class="tip-title">单位装备配置</div>
<div class="more" @click="openEquipConfig">更多 ></div> -->
</div>
<div class="bottom-list">
<UnitEquipmentConfig />
@ -45,11 +55,11 @@
</div>
<div class="bottom-box">
<div class="bottom-right">
<div class="title-tip">
<div class="tip-title">装备状态</div>
<div class="more" @click="openStatusMore">更多 ></div>
<div class="title-tip title-status" @click="openStatusMore">
<!-- <div class="tip-title">装备状态</div>
<div class="more" @click="openStatusMore">更多 ></div> -->
</div>
<div class="equip-status">
<div>
<EquipStatus />
</div>
<div class="bottom-explain">
@ -185,20 +195,35 @@ export default {
</script>
<style lang="scss" scoped>
.num-text {
font-family: 'DIN';
}
.left-warp {
height: calc(100vh - 100px);
display: flex;
margin-left: 57px;
width: 474px;
/* height: calc(100vh - 100px); */
/* display: flex;
flex-direction: column;
justify-content: space-between;
justify-content: space-between; */
.title-all {
background-image: url('../../img/装备总览.png');
background-size: 100% 100%;
}
.title-equip {
background-image: url('../../img/单位装备配置.png');
background-size: 100% 100%;
}
.title-status {
background-image: url('../../img/装备状态.png');
background-size: 100% 100%;
}
.title-tip {
display: flex;
margin-bottom: 12px;
height: 32px;
/* display: flex;
justify-content: space-between;
/* padding-top: 8px; */
padding-left: 40px;
font-family: DS-TITLE;
background: linear-gradient(to bottom, #f0f5f8, #5eb6f0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: DS-TITLE; */
.more {
margin-right: 20px;
@ -209,53 +234,62 @@ export default {
}
}
.top-box {
/* height: 350px; */
height: 18%;
background-image: url('../../img/equipmentOverview.png');
/* background-image: url('../../img/equipmentOverview.png'); */
background-size: 100% 100%;
.equip-box {
padding-left: 20px;
/* margin-top: 20px; */
/* margin-bottom: 13px; */
height: 100px;
/* padding-left: 20px; */
margin-bottom: 12px;
height: 116px;
background-image: url('../../img/equipmentOverviewData.png');
background-size: 100% 100%;
/* position: relative; */
display: flex;
justify-content: space-around;
align-items: center;
.unit {
font-size: 15px;
color: #ccc;
}
.equip-item-1 {
margin-bottom: 15px;
margin-bottom: 10px;
}
.equip-item-2 {
color: #fefbdc;
/* color: #fefbdc; */
font-size: 28px;
font-weight: 800;
cursor: pointer;
background: linear-gradient(180deg, #fff 25.81%, #fdf277 77.42%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.equip-item-3 {
margin-bottom: 15px;
margin-bottom: 10px;
}
.equip-item-4 {
color: #fefbdc;
font-size: 28px;
font-weight: 800;
cursor: pointer;
background: linear-gradient(180deg, #fff 25.81%, #fdf277 77.42%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.unit {
font-size: 10px;
color: #ccc;
}
}
}
.item-box {
padding: 0 20px;
/* padding: 0 20px; */
margin-bottom: 12px;
}
.item-line {
background-image: url('../../img/item-line.png');
background-size: 100% 100%;
width: 3px;
height: 206px;
}
.bottom-box {
.bottom-explain {
margin-top: 15px;
color: #97aad6;
font-size: 12px;
display: flex;
@ -265,19 +299,17 @@ export default {
.bottom-tip {
}
.bottom-left {
height: 210px;
background-image: url('../../img/unit-equip.png');
background-size: 100% 100%;
/* height: 210px; */
/* background-image: url('../../img/unit-equip.png'); */
/* background-size: 100% 100%; */
.bottom-list {
margin: 5px 0 10px;
height: 165px;
overflow: auto;
height: 240px;
}
}
.bottom-right {
/* height: 250px; */
background-image: url('../../img/equip-status.png');
background-size: 100% 100%;
/* background-image: url('../../img/equip-status.png');
background-size: 100% 100%; */
}
}
}

31
src/views/screen/wsScreen/components/right/ProEquipSituationList.vue
View File

@ -5,11 +5,13 @@
<div class="more more-warp">
<div>
<el-select
popper-class="mySelect"
v-model="proCode"
placeholder=""
clearable
filterable
size="mini"
:popper-append-to-body="false"
@change="getList"
style="width: 80px"
>
@ -53,7 +55,7 @@
</div>
<div class="table-list scroll-container">
<table cellspacing="0" cellpadding="8" style="width: 100%; border-collapse: collapse; text-align: center">
<table cellspacing="0" cellpadding="8" style="width: 100%; text-align: center">
<!-- 双层表头 -->
<thead>
<!-- 第一行：跨列合并 -->
@ -162,9 +164,10 @@ export default {
padding-left: 40px;
font-family: DS-TITLE;
.title-text {
background: linear-gradient(to bottom, #f0f5f8, #5eb6f0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background: linear-gradient(180deg, #FFF 19.35%, #5DCBFE 77.42%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.more {
@ -252,10 +255,11 @@ export default {
}
table {
border-collapse: collapse;
width: 100%;
font-family: 'Alibaba-PuHuiTi-Regular';
font-size: 11px;
border-collapse: separate;
border-spacing: 0 5px;
}
th,
@ -289,4 +293,21 @@ tbody tr:hover {
background-color: #1f4a85 !important ;
color: #fff !important;
}
::v-deep .el-select-dropdown {
background-color: #1f4a85 !important;
left: -300px !important;
width: 400px !important;
height: 180px !important;
border: 1px solid #1f4a85 !important;
overflow: hidden;
}
::v-deep .el-scrollbar {
height: 182px !important;
}
::v-deep .el-select-dropdown__item {
color: #fff !important;
}
::v-deep .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
background: #1f4a85 !important;
}
</style>

5
src/views/screen/wsScreen/components/right/UsageRateSituationList.vue
View File

@ -6,7 +6,7 @@
</div>
<div class="table-list scroll-container">
<table cellspacing="0" cellpadding="8" style="width: 100%; border-collapse: collapse; text-align: center">
<table cellspacing="0" cellpadding="8" style="width: 100%; text-align: center">
<!-- 双层表头 -->
<thead>
<!-- 第一行：跨列合并 -->
@ -92,10 +92,11 @@ export default {
overflow: auto;
}
table {
border-collapse: collapse;
width: 100%;
font-family: 'Alibaba-PuHuiTi-Regular';
font-size: 11px;
border-collapse: separate !important;
border-spacing: 0 5px;
}
th,

9
src/views/screen/wsScreen/components/right/index.vue
View File

@ -123,6 +123,8 @@ export default {
<style lang="scss" scoped>
.right-warp {
/* margin-right: 47px; */
width: 548px;
height: calc(100vh - 79px);
display: flex;
flex-direction: column;
@ -134,9 +136,10 @@ export default {
padding-top: 10px;
padding-left: 45px;
font-family: DS-TITLE;
background: linear-gradient(to bottom, #f0f5f8, #5eb6f0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background: linear-gradient(180deg, #FFF 19.35%, #5DCBFE 77.42%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
.more {
margin-right: 20px;

BIN
src/views/screen/wsScreen/img/equipmentOverviewData.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 59 KiB

After

Width:  |  Height:  |  Size: 90 KiB

BIN
src/views/screen/wsScreen/img/item-line.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/views/screen/wsScreen/img/单位装备配置.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
src/views/screen/wsScreen/img/装备总览.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
src/views/screen/wsScreen/img/装备状态.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

20
src/views/screen/wsScreen/index.vue
View File

@ -1,7 +1,10 @@
<template>
<div id="index" ref="appRef">
<div class="bg" id="app">
<el-row :gutter="20">
<!-- <left />
<center />
<right /> -->
<el-row :gutter="0">
<el-col :span="7" :offset="0"><left /></el-col>
<el-col :span="10" :offset="0"><center /></el-col>
<el-col :span="7" :offset="0"><right /></el-col>
@ -42,12 +45,16 @@ export default {
font-family: 'Alibaba-PuHuiTi-Regular';
src: url('../../../assets/font-family/alibaba/Alibaba-PuHuiTi-Regular.ttf');
}
@font-face {
font-family: 'DIN';
src: url('../../../assets/font-family/DIN/DIN-Medium.otf');
}
#index {
color: #d3d6dd;
width: 100%;
height: 100%;
/* width: 1920px;
height: 1080px; */
/* width: 100%;
height: 100%; */
width: 1920px;
height: 1080px;
/* position: absolute; */
/* top: 50%;
left: 50%;
@ -61,7 +68,8 @@ export default {
.bg {
/* width: 100vw;
height: 100vh; */
padding: 79px 2% 0 2%;
/* padding: 79px 2% 0 2%; */
padding-top: 79px;
}
}
</style>

7
src/views/screen/wsScreenWidescreen/components/left/index.vue
View File

@ -221,9 +221,10 @@ export default {
padding-top: 8px;
padding-left: 40px;
font-family: DS-TITLE;
background: linear-gradient(to bottom, #f0f5f8, #5eb6f0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background: linear-gradient(180deg, #FFF 19.35%, #5DCBFE 77.42%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
.more {
margin-right: 20px;

7
src/views/screen/wsScreenWidescreen/components/right/ProEquipSituationList.vue
View File

@ -150,9 +150,10 @@ export default {
padding-left: 45px;
font-family: DS-TITLE;
.title-text {
background: linear-gradient(to bottom, #f0f5f8, #5eb6f0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background: linear-gradient(180deg, #FFF 19.35%, #5DCBFE 77.42%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.more {

7
src/views/screen/wsScreenWidescreen/components/right/index.vue
View File

@ -134,9 +134,10 @@ export default {
padding-top: 10px;
padding-left: 45px;
font-family: DS-TITLE;
background: linear-gradient(to bottom, #f0f5f8, #5eb6f0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background: linear-gradient(180deg, #FFF 19.35%, #5DCBFE 77.42%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
.more {
margin-right: 20px;