Skip to content

G
gs1
Commit c7b4edf5 by 林家欣
Options

修改公告样式

parent 8d9fad19
Showing with 110 additions and 67 deletions
src/views/Home/comps/notice.vue
...@@ -9,19 +9,20 @@ ...@@ -9,19 +9,20 @@
/> />
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-lg-5 notice-tp d-lg-block"> <div class="col-lg-5 notice-tp d-lg-block" v-if="false">
<img src="../../../assets/image/home/notice-tp.png" alt="" /> <img src="../../../assets/image/home/notice-tp.png" alt="" />
</div> </div>
<div class="col-lg-7 notice-nr"> <div class="col-lg-12 notice-nr">
<div class="notice-cate">
<span></span>
<span>公告</span>
<span></span>
</div>
<div class="notice-nr-kj"> <div class="notice-nr-kj">
<div class="notice-cate">
<span></span>
<span>公告</span>
<span></span>
</div>
<p class="notice-note"> <p class="notice-note">
为应对疫情，切实减轻企业负担，协助企业复工复产、渡过难关，编码中心决定自2020年3月1日至2021年9月30日，采取阶段性降费措施。<span 为应对疫情，切实减轻企业负担，协助企业复工复产、渡过难关，编码中心决定自2020年3月1日至2021年9月30日，采取阶段性降费措施。<span
@click="handelJump">点击查看收费公示表</span @click="handelJump"
>点击查看收费公示表</span
> >
</p> </p>
<div class="notice-cont"> <div class="notice-cont">
...@@ -29,24 +30,44 @@ ...@@ -29,24 +30,44 @@
<span></span> <span></span>
<span>一次性加入费用：</span> <span>一次性加入费用：</span>
</div> </div>
<ul class="cont-ul"> <table align="center" border="1">
<li> <tbody>
<span>十三位数字标准码- - - - - -</span><span>720元</span> <tr>
</li> <td>十三位数字标准码一次性加入费</td>
<li> <td>收费标准<br />720元</td>
<span>十三位数字标准码和八位数字缩短码- - - - - -</span </tr>
><span>1120元</span> <tr>
</li> <td>十三位数字标准码和八位数字缩短码一次性加入费</td>
</ul> <td>收费标准<br />1120元</td>
</tr>
</tbody>
</table>
</div> </div>
<div class="notice-cont"> <div class="notice-cont">
<div class="cont-cate"> <div class="cont-cate">
<span></span> <span></span>
<span>系统维护费用：</span> <span>系统维护费用：</span>
</div> </div>
<ul class="cont-ul"> <table align="center" border="1">
<li><span>单个企业- - - - - -</span><span>580元/年</span></li> <tbody>
</ul> <tr>
<td>系统成员类别</td>
<td>收费标准</td>
</tr>
<tr>
<td>单个企业</td>
<td>580元/年</td>
</tr>
<tr>
<td>集团公司</td>
<td>1080元/年</td>
</tr>
<tr>
<td>进出口公司</td>
<td>1080元/年</td>
</tr>
</tbody>
</table>
</div> </div>
</div> </div>
</div> </div>
...@@ -67,7 +88,7 @@ export default { ...@@ -67,7 +88,7 @@ export default {
this.show = false; this.show = false;
}, },
handelJump() { handelJump() {
window.open('/Business/Corppaynew', '_blank'); window.open("/Business/Corppaynew", "_blank");
}, },
}, },
}; };
...@@ -89,8 +110,8 @@ export default { ...@@ -89,8 +110,8 @@ export default {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
z-index: 999; z-index: 999;
&.mask{ &.mask {
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
} }
.notice-kj { .notice-kj {
...@@ -98,7 +119,7 @@ export default { ...@@ -98,7 +119,7 @@ export default {
left: 50%; left: 50%;
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 36%; width: 30%;
background: #fff; background: #fff;
border-radius: 8px; border-radius: 8px;
.notice-close { .notice-close {
...@@ -114,56 +135,60 @@ export default { ...@@ -114,56 +135,60 @@ export default {
> * { > * {
padding: 0; padding: 0;
} }
.notice-tp { // .notice-tp {
display: none; // display: none;
overflow: hidden; // overflow: hidden;
img { // img {
height: 100%; // height: 100%;
// max-width: 100%; // // max-width: 100%;
} // }
// }
}
}
.notice-cate {
display: flex;
align-items: center;
justify-content: center;
margin-top: 35px;
span {
display: inline-block;
&:nth-child(1) {
width: 20%;
height: 2px;
background: linear-gradient(to right, #fff, #f26335);
}
&:nth-child(2) {
color: #f26335;
font-size: 26px;
margin: 0 20px;
}
&:nth-child(3) {
width: 20%;
height: 2px;
background: linear-gradient(to left, #fff, #f26335);
} }
} }
} }
.notice-nr-kj { .notice-nr-kj {
width: 90%; width: 90%;
margin: 0 auto; margin: 20px auto;
.notice-cate { height: 300px;
display: flex; overflow: hidden;
align-items: center; overflow-y: auto;
justify-content: center;
margin-top: 35px;
span {
display: inline-block;
&:nth-child(1) {
width: 20%;
height: 2px;
background: linear-gradient(to right, #fff, #f26335);
}
&:nth-child(2) {
color: #f26335;
font-size: 26px;
margin: 0 20px;
}
&:nth-child(3) {
width: 20%;
height: 2px;
background: linear-gradient(to left, #fff, #f26335);
}
}
}
.notice-note { .notice-note {
font-size: 14px; font-size: 14px;
margin-top: 20px;
span { span {
color: rgba(242, 99, 53, 1); color: rgba(242, 99, 53, 1);
cursor: pointer; cursor: pointer;
} }
} }
.notice-cont { .notice-cont {
margin-top: 20px; // margin-top: 20px;
.cont-cate { .cont-cate {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 10px 0;
span { span {
&:nth-child(1) { &:nth-child(1) {
display: inline-block; display: inline-block;
...@@ -173,17 +198,35 @@ export default { ...@@ -173,17 +198,35 @@ export default {
transform: rotate(45deg); transform: rotate(45deg);
margin-right: 15px; margin-right: 15px;
} }
&:nth-child(2) {
color: #454545;
font-size: 14px;
}
} }
} }
.cont-ul { }
padding: 0; table {
font-size: 14px; display: table;
li { border-collapse: separate;
padding: 10px 0; box-sizing: border-box;
span { text-indent: initial;
&:nth-child(2) { border-spacing: 2px;
color: rgba(242, 99, 53, 1); border-color: grey;
} table-layout: fixed;
text-align: center;
width: 80%;
tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
td {
display: table-cell;
vertical-align: inherit;
border-width: 1px;
} }
} }
} }
......
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