Skip to content

G
gs1
Commit 62aed9db by 林家欣
Options

资讯中心着陆页切图90%

parent 6da72b63
Showing with 340 additions and 6 deletions
src/router/index.js
......@@ -421,7 +421,14 @@ const routes = [
},
component: () => import("@/views/Business/Training.vue"),
},
{
path: "/News",
name: "News",
meta: {
name: "资讯中心",
},
component: () => import("@/views/News/index.vue"),
},
{
path: "/Knowledge",
name: "Knowledge",
......
src/views/News/index.vue
<template>
<div class="news">
<div class="news-one">
<div class="container">
<div class="row">
<div class="col-lg-8 tpzx">
<div class="cate">
<span>图片资讯</span>
<span>查看更多>></span>
</div>
<div class="tpzx-ul">
<div class="tpzx-li" v-for="(tmp, i) in 3" :key="i">
<div class="tpzx-li-tp">
<img src="../../assets/image/news/tpzx-tp1.jpg" alt="" />
</div>
<div class="tpzx-li-bt">中国代表团成功参加第27次IS12111</div>
</div>
</div>
</div>
<div class="col-lg-4 top10">
<div class="cate">
<span>8月资讯排行TOP10</span>
<span></span>
</div>
<div class="top10-kj">
<ul>
<li v-for="(tmp, i) in 5" :key="i">
<span></span
><span
>国家市场监督管理总局赴中国物品编码中心进行追溯工作调研</span
>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="news-two">
<div class="container">
<div class="row">
<div class="col-lg-6 zxhd">
<div class="cate">
<span>中心活动</span>
<span></span>
</div>
<div class="two-kj">
<ul class="two-ul">
<li v-for="(tmp, i) in 6" :key="i">
<span></span
><span
>编码分支机构医疗器械唯一标识（UDI）专项培训班在烟台成功举办</span
>
</li>
</ul>
</div>
</div>
<div class="col-lg-6 dfdt">
<div class="cate">
<span>地方动态</span>
<span></span>
</div>
<div class="two-kj">
<ul class="two-ul">
<li v-for="(tmp, i) in 6" :key="i">
<span></span
><span
>编码分支机构医疗器械唯一标识（UDI）专项培训班在烟台成功举办</span
>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="news-three">
<div class="container">
<div class="sdzt">
<div class="cate borderBottom">
<span>深度专题</span>
<span>查看更多>></span>
</div>
<div class="row">
<div class="col-lg-8">
<img src="../../assets/image/news/sdzt-tp1.png" alt="" />
</div>
<div class="col-lg-4">
<ul>
<li v-for="(tmp, i) in 7" :key="i">
<span></span
><span>进口商品如何发布全网，拿好这个跨境进口数据法宝</span>
</li>
</ul>
</div>
</div>
</div>
<div class="jcsp">
<div class="cate borderBottom">
<span>深度专题</span>
<span>查看更多>></span>
</div>
<div class="row">
<div class="col-lg-4">
<ul>
<li v-for="(tmp, i) in 7" :key="i">
<span></span
><span>进口商品如何发布全网，拿好这个跨境进口数据法宝</span>
</li>
</ul>
</div>
<div class="col-lg-8">
<img src="../../assets/image/news/jcsp-tp1.png" alt="" />
</div>
</div>
</div>
</div>
</div>
<div class="news-four">
<div class="container">
<ul class="four-ul">
<li v-for="(tmp, i) in 8" :key="i" class="row">
<div class="col-lg-4 four-li-left">
<img src="../../assets/image/news/icon_lingshou.png" alt="" />
</div>
<div class="col-lg-8 four-li-right">
<div class="li-right-top">
<div>零售</div>
<div>
<span>资料下载</span>
</div>
</div>
<ul class="li-right-ul">
<li v-for="(tmp, i) in 3" :key="i">
<span></span
><span>手机扫描商品条码：即时价格比较是零售业未来</span>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
return {};
},
};
</script>
<style lang="scss">
.news {
@media screen and (min-width: 992px) {
.tpzx-ul {
justify-content: space-between;
}
.four-ul{
li{
width: 45%;
}
}
}
@media screen and (max-width: 992px) {
.tpzx-ul {
justify-content: space-around;
}
}
}
</style>
<style lang="scss" scoped>
.news {
@mixin newsUl {
ul {
padding: 0;
width: 90%;
margin: 0 auto;
li {
display: flex;
align-items: center;
padding: 10px 0;
width: 100%;
span {
display: block;
&:nth-child(1) {
width: 6px;
height: 6px;
background: #f26335;
border-radius: 50%;
margin-right: 7px;
}
&:nth-child(2) {
@include ellipsis;
font-size: 14px;
color: #414345;
flex: 1;
}
}
}
}
}
.cate {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
span {
&:nth-child(1) {
font-size: 18px;
color: #0e2c6b;
}
&:nth-child(2) {
color: #f26335;
font-size: 14px;
}
}
&.borderBottom {
border-bottom: 1px solid #c5d8ee;
}
}
.news-one {
@include newsUl;
background: #ffffff;
padding-bottom: 40px;
.tpzx-ul {
display: flex;
flex-wrap: wrap;
.tpzx-li {
width: 216px;
background: #ffffff;
box-shadow: 0px 4px 15px 2px rgba(4, 64, 141, 0.08);
border-radius: 4px;
img {
width: 100%;
}
.tpzx-li-bt {
width: 90%;
margin: 0 auto;
text-align: center;
color: #414345;
font-size: 14px;
padding: 14px 0;
@include ellipsis;
}
}
}
.top10-kj {
background: #ffffff;
box-shadow: 0px 4px 15px 2px rgba(4, 64, 141, 0.08);
border-radius: 4px;
padding: 6px 0;
}
}
.news-two {
@include newsUl;
background: #f0f5fa;
padding: 20px 0 40px 0;
.two-kj {
background: #ffffff;
box-shadow: 0px 4px 15px 2px rgba(4, 64, 141, 0.08);
}
.zxhd {
.two-kj {
border-left: 4px solid #f26335;
}
}
.dfdt {
.two-kj {
border-left: 4px solid #4cd070;
}
}
}
.news-three {
@include newsUl;
background: #ffffff;
padding-bottom: 40px;
img {
width: 100%;
}
.row {
> div {
display: flex;
align-items: center;
}
}
.row {
margin-top: 30px;
}
}
.news-four {
background: #f0f5fa;
padding: 20px 0;
.four-ul {
padding: 0;
margin: 0;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
>li {
display: flex;
background: #ffffff;
box-shadow: 0px 4px 15px 2px rgba(4, 64, 141, 0.08);
margin: 20px 0;
.four-li-left {
background: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
}
.four-li-right {
background: #ffffff;
padding-top: 10px;
padding-bottom: 10px;
@include newsUl;
.li-right-top {
display: flex;
justify-content: space-between;
align-items: center;
color: #f26335;
div {
&:nth-child(1) {
font-size: 18px;
}
&:nth-child(2) {
font-size: 12px;
cursor: pointer;
}
}
}
}
}
}
}
},
}
</script>
\ No newline at end of file
</style>
\ No newline at end of file
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