Skip to content

G
gs1
Commit 52139722 by 林家欣
Options

首页公告和定制服务切图完成

parent c39e279a
Showing with 839 additions and 14 deletions
src/assets/css/_mixin.scss
......@@ -262,7 +262,7 @@
@mixin elInput(
$height: calcvh(27),
$height: auto,
$color: #9fceff,
$placeholderColor: #9fceff,
$background: rgba(0, 28, 103, 0.56),
......
src/components/main.vue
<template>
<div>
<Header></Header>
<div class="router-view marginTop20 mb-4">
<div class="router-view">
<router-view></router-view>
</div>
<Footer></Footer>
......
src/router/index.js
......@@ -28,6 +28,11 @@ const routes = [
component: () => import("@/views/Home/index"),
},
{
path: "/Home/sousuo",
name: "sousuo",
component: () => import("@/views/Home/sousuo"),
},
{
path: "/Org",
name: "Org",
meta: {
......
src/views/Home/comps/notice.vue 0 → 100644
<template>
<div class="notice mask" v-if="show">
<div class="notice-kj">
<img
src="../../../assets/image/home/notice-close.png"
alt=""
class="notice-close"
@click="handelClose"
/>
<div class="container">
<div class="row">
<div class="col-lg-5 notice-tp d-lg-block">
<img src="../../../assets/image/home/notice-tp.png" alt="" />
</div>
<div class="col-lg-7 notice-nr">
<div class="notice-nr-kj">
<div class="notice-cate">
<span></span>
<span>公告</span>
<span></span>
</div>
<p class="notice-note">
为应对疫情，切实减轻企业负担，协助企业复工复产、渡过难关，编码中心决定自2020年3月1日至2021年9月30日，采取阶段性降费措施。<span
>点击查看收费公示表</span
>
</p>
<div class="notice-cont">
<div class="cont-cate">
<span></span>
<span>一次性加入费用：</span>
</div>
<ul class="cont-ul">
<li>
<span>十三位数字标准码- - - - - -</span><span>720元</span>
</li>
<li>
<span>十三位数字标准码和八位数字缩短码- - - - - -</span
><span>1120元</span>
</li>
</ul>
</div>
<div class="notice-cont">
<div class="cont-cate">
<span></span>
<span>系统维护费用：</span>
</div>
<ul class="cont-ul">
<li><span>单个企业- - - - - -</span><span>580元/年</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
show: false,
};
},
methods: {
handelClose() {
this.show = false;
},
},
};
</script>
<style lang="scss">
@media screen and (max-width: 992px) {
.notice {
.notice-kj {
width: 90% !important;
}
}
}
</style>
<style lang="scss" scoped>
.notice {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 999;
&.mask{
background: rgba(0, 0, 0, 0.7);
}
.notice-kj {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 30%;
background: #fff;
border-radius: 8px;
.notice-close {
position: absolute;
right: 19px;
top: 19px;
}
.container {
padding: 0;
.row {
margin: 0;
> * {
padding: 0;
}
.notice-tp {
display: none;
img {
width: 100%;
}
}
}
}
.notice-nr-kj {
width: 90%;
margin: 0 auto;
.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-note {
font-size: 14px;
margin-top: 30px;
span {
color: rgba(242, 99, 53, 1);
}
}
.notice-cont {
.cont-cate {
display: flex;
align-items: center;
span {
&:nth-child(1) {
display: inline-block;
width: 6px;
height: 6px;
background: #f26335;
transform: rotate(45deg);
margin-right: 15px;
}
}
}
.cont-ul {
padding: 0;
font-size: 14px;
li {
padding: 10px 0;
span {
&:nth-child(2) {
color: rgba(242, 99, 53, 1);
}
}
}
}
}
}
}
}
</style>
\ No newline at end of file
src/views/Home/comps/sousuo-list.vue 0 → 100644
<template>
<ul class="sousuoList">
<li v-for="(tmp, i) in 10" :key="i">
<div class="sousuoList-top">
<span>【新闻资讯】山东省条码印刷品质量检验站通过</span>
<span>CNAS评审组现场评审</span>
</div>
<div class="sousuoList-middle">中国合格评定国家认可委员会（CNAS）派遣2名评审员组成评审组就所申请一维条码符号、二维条码符号、行业应用软件、移动智能终端应用软件和移动智能终端应用软件（个人信息安全保护…</div>
<div class="sousuoList-bottom">
<div>
<span>日期：</span>
<span>2021-07-07</span>
</div>
<div>
<span>来自：</span>
<span>中国物品编码中心山东分中心</span>
</div>
</div>
</li>
</ul>
</template>
<style lang="scss" scoped>
.sousuoList{
margin: 0;
padding: 0;
li{
border-bottom: 1px dashed #F0F5FA;
padding: 20px 0;
&:first-child{
padding-top: 0;
}
.sousuoList-top{
font-size: 18px;
span{
&:nth-child(1) {
color: rgba(65, 67, 69, 1);
}
&:nth-child(2) {
color: rgba(242, 99, 53, 1);
}
}
}
.sousuoList-middle{
font-size: 14px;
color: #666666;
padding: 20px 0;
}
.sousuoList-bottom{
display: flex;
flex-wrap: wrap;
font-size: 13px;
>div{
margin-right: 60px;
&:last-child{
margin-right: 0;
}
span{
&:nth-child(1){
color: rgba(0, 121, 158, 1);
}
&:nth-child(2){
color: rgba(102, 102, 102, 1);
}
}
}
}
}
}
</style>
\ No newline at end of file
src/views/Home/index.vue
<template>
<div class="home">
<div
id="banner"
class="banner carousel slide"
data-bs-ride="carousel"
>
<!-- Banner图 -->
<div id="banner" class="banner carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button
type="button"
......@@ -84,6 +81,7 @@
</div>
</div>
</div>
<!-- 要闻、中心、地方、国际 -->
<div class="bgWhite padding40">
<div class="container">
<div class="row">
......@@ -128,7 +126,7 @@
</div>
</div>
</div>
<div class="carousel-item" >
<div class="carousel-item">
<img
src="../../assets/image/home/jiaodiantu.png"
class="d-block w-100"
......@@ -259,6 +257,7 @@
</div>
</div>
</div>
<!-- 业务大厅、定制服务 -->
<div class="container">
<div class="padding30">
<div class="row">
......@@ -343,14 +342,21 @@
<div class="cate">定制服务</div>
<div class="bgWhite container">
<div class="row">
<div class="col-lg-4" v-for="(tmp, i) in 12" :key="i">
<template v-for="(tmp, i) in dzfw">
<div
class="col-lg-4 dzfw-li"
:key="i"
v-if="tmp.isChecked"
@click="dzfwHandelClick(i)"
>
<div class="dzfw-border">
<div class="dzfw-tp">
<img src="../../assets/image/home/Gds.png" alt="" />
<img :src="tmp.ico" alt="" />
</div>
<div class="dzfw-bt">商品信息服务平台</div>
<div class="dzfw-bt">{{ tmp.name }}</div>
</div>
</div>
</template>
</div>
</div>
</div>
......@@ -588,6 +594,42 @@
</div>
</div>
</div>
<notice />
<modal
:dialogData="dzfwMoreDialog"
@toFatherClose="dzfwMoreHandel(false)"
v-if="dzfwMoreDialog.isShow"
>
<template v-slot:body>
<div class="dzfwDialog">
<ul class="dzfwDialog-ul dzfwDialog-width">
<template v-for="(tmp, i) in dzfw">
<li :key="i" v-if="tmp.name !== '更多'">
<div class="li-kj">
<el-checkbox
:value="tmp.isChecked"
class="dzfwDialog-checkbox"
@change="dzfwHandelChange(i)"
></el-checkbox>
<div class="dzfwDialog-ico">
<img :src="tmp.ico" alt="" />
</div>
<div class="dzfwDialog-title">{{ tmp.name }}</div>
</div>
</li>
</template>
</ul>
</div>
</template>
</modal>
<message :messageData="messageDialog" v-if="messageDialog.isShow">
<template v-slot:body>
<div class="dzfwMessage">
<p>您选择了超过8个!</p>
<p>2s后自动关闭</p>
</div>
</template>
</message>
</div>
</template>
<script>
......@@ -595,6 +637,9 @@ import list from "./comps/list.vue";
import list2 from "./comps/list2.vue";
import yylyList from "./comps/yyly-list.vue";
import otherList from "./comps/other-list.vue";
import notice from "./comps/notice.vue";
import modal from "../comps/modal.vue";
import message from "../comps/message.vue";
export default {
components: {
......@@ -602,6 +647,9 @@ export default {
list2,
yylyList,
otherList,
notice,
modal,
message,
},
data() {
return {
......@@ -616,10 +664,125 @@ export default {
],
keywords: "",
},
dzfw: [
{
ico: require("../../assets/image/home/dzfw-ico1.png"),
name: "商品信息服务平台",
isChecked: true,
},
{
ico: require("../../assets/image/home/dzfw-ico2.png"),
name: "进口商品数据通报",
isChecked: true,
},
{
ico: require("../../assets/image/home/dzfw-ico3.png"),
name: "条码微站",
isChecked: true,
},
{
ico: require("../../assets/image/home/dzfw-ico4.png"),
name: "商品二维码",
isChecked: true,
},
{
ico: require("../../assets/image/home/dzfw-ico5.png"),
name: "GDSN",
isChecked: true,
},
{
ico: require("../../assets/image/home/dzfw-ico6.png"),
name: "条码信息查询",
isChecked: true,
},
{
ico: require("../../assets/image/home/dzfw-ico7.png"),
name: "条码商桥",
isChecked: true,
},
{
ico: require("../../assets/image/home/dzfw-ico8.png"),
name: "产品服务",
isChecked: false,
},
{
ico: require("../../assets/image/home/dzfw-ico9.png"),
name: "ECODE",
isChecked: true,
},
{
ico: require("../../assets/image/home/dzfw-ico10.png"),
name: "平台服务",
isChecked: false,
},
{
ico: require("../../assets/image/home/dzfw-ico11.png"),
name: "条码/射频(RFID)/软件检测服务",
isChecked: true,
},
{
ico: require("../../assets/image/home/dzfw-ico12.png"),
name: "追溯平台",
isChecked: true,
},
{
ico: require("../../assets/image/home/dzfw-ico13.png"),
name: "教育知识管理平台",
isChecked: true,
},
],
dzfLastChild: {
ico: require("../../assets/image/home/dzfw-more.png"),
name: "更多",
isChecked: true,
method: this.dzfwMoreHandel,
},
dzfwMoreDialog: {
isShow: false,
width: "auto",
title: "定制服务",
},
checkList: [],
messageDialog: {
isShow: false,
width: "auto",
},
};
},
created() {
console.log(this.$route, "this.$route");
this.dzfw.push(this.dzfLastChild);
},
methods: {
dzfwHandelChange(i) {
this.dzfw[i].isChecked = !this.dzfw[i].isChecked;
const currentCheck = this.dzfw[i].isChecked;
const checkList = [];
this.dzfw.forEach((item) => {
if (item.name !== "更多" && item.isChecked) {
checkList.push(item);
}
});
if (currentCheck && checkList.length > 11) {
this.dzfw[i].isChecked = false;
this.messageDialog.isShow = true;
setTimeout(() => {
this.messageDialog.isShow = false;
}, 2000);
}
console.log(this.dzfw[i], "newValue");
},
dzfwHandelClick(i) {
console.log(i, "i");
if (this.dzfw[i].method) {
this.dzfw[i].method(true);
}
},
// 打开更多定制
dzfwMoreHandel(status) {
console.log(status, "打开更多定制");
this.dzfwMoreDialog.isShow = status;
},
},
};
</script>
......@@ -629,6 +792,31 @@ export default {
@include elInput(40px, #0e2c6b, #0e2c6b, #fff, #059ede, 4px);
@include elSelect(#0e2c6b, #0e2c6b);
}
.dzfwDialog-checkbox {
.el-checkbox__inner {
border-radius: 50%;
}
}
}
@media screen and (min-width: 992px) {
.dzfwDialog-width {
width: 980px;
margin: 0 auto;
position: relative;
}
.dzfwMessage {
width: auto;
}
}
@media screen and (max-width: 992px) {
.dzfwDialog-width {
width: 140px;
margin: 0 auto;
position: relative;
}
.dzfwMessage {
width: 120px;
}
}
</style>
<style lang="scss" scoped>
......@@ -862,14 +1050,15 @@ export default {
.wsylqy,
.kjywblzq {
.ywdt-cate {
height: 55px;
height: 52px;
}
}
}
.dzfw {
.row {
> div {
> .dzfw-li {
padding: 0 10px;
cursor: pointer;
@media screen and (min-width: 992px) {
background: url("../../assets/image/home/line.png") no-repeat right
center;
......@@ -884,7 +1073,11 @@ export default {
}
.dzfw-border {
text-align: center;
padding: 25px 0;
// padding: 25px 0;
height: 122px;
display: flex;
flex-direction: column;
justify-content: center;
border-top: 1px solid #f0f5fa;
}
.dzfw-bt {
......@@ -1019,5 +1212,49 @@ export default {
}
}
}
.dzfwDialog {
display: flex;
width: 100%;
justify-content: center;
overflow-y: auto;
max-height: 80vh;
.dzfwDialog-ul {
display: flex;
flex-wrap: wrap;
padding: 0;
margin: 0;
li {
width: 140px;
.li-kj {
width: 100px;
height: 106px;
background: #f7f7f7;
border-radius: 2px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
margin: 20px auto;
}
.dzfwDialog-title {
color: #0e2c6b;
font-size: 12px;
text-align: center;
}
.dzfwDialog-checkbox {
position: absolute;
right: 0;
top: 0;
}
}
}
}
.dzfwMessage {
p {
text-align: center;
}
}
}
</style>
\ No newline at end of file
src/views/Home/sousuo.vue 0 → 100644
<template>
<div class="sousuo">
<div class="sousuo-top">
<div class="container">
<div class="sousuo-top-form">
<el-input placeholder="请输入内容" clearable></el-input>
<div class="top-form-btn">
<img src="../../assets/image/home/sousuo-ico1.png" alt="" />
</div>
</div>
<div class="hot">
<span>热词：</span>
<span>我要续展</span>
<span>申请条码</span>
</div>
</div>
</div>
<div class="sousuo-bottom">
<div class="container">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button
class="nav-link active"
id="home-tab"
data-bs-toggle="tab"
data-bs-target="#home"
type="button"
role="tab"
aria-controls="home"
aria-selected="true"
>
<span>全部问题</span>
</button>
</li>
<li class="nav-item" role="presentation">
<button
class="nav-link"
id="profile-tab"
data-bs-toggle="tab"
data-bs-target="#profile"
type="button"
role="tab"
aria-controls="profile"
aria-selected="false"
>
<span>新闻资讯</span>
</button>
</li>
</ul>
<div class="sousuo-bottom-solt">
<div class="sousuo-total">相关结果1209个</div>
<el-date-picker
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
size="mini"
:picker-options="pickerOptions"
>
</el-date-picker>
</div>
<div class="tab-content" id="myTabContent">
<div
class="tab-pane fade show active"
id="home"
role="tabpanel"
aria-labelledby="home-tab"
>
<sousuoList />
<pages />
</div>
<div
class="tab-pane fade"
id="profile"
role="tabpanel"
aria-labelledby="profile-tab"
>
222
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import sousuoList from "./comps/sousuo-list.vue";
import pages from "../comps/pages.vue";
export default {
components: {
sousuoList,
pages,
},
data() {
return {
pickerOptions: {
shortcuts: [
{
text: "最近一周",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近一个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近三个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit("pick", [start, end]);
},
},
],
},
};
},
};
</script>
<style lang="scss">
.sousuo {
.sousuo-top-form {
@include elInput(50px, #414345, #414345, #fff, #cfdcea);
.el-input__inner {
border-right: 0;
border-radius: 4px 0 0 4px;
}
}
@media screen and(min-width: 992px) {
.sousuo-top-form {
.el-input {
width: 78%;
}
}
}
}
</style>
<style lang="scss" scoped>
.sousuo {
.sousuo-top {
.sousuo-top-form {
display: flex;
margin-top: 30px;
.top-form-btn {
width: 100px;
height: 50px;
background: #f26335;
border-radius: 0px 4px 4px 0px;
text-align: center;
line-height: 50px;
cursor: pointer;
}
}
.hot {
padding: 14px 0;
span {
color: #414345;
font-size: 14px;
margin-right: 30px;
&:first-child {
font-size: 13px;
color: #999999;
margin-right: 20px;
}
}
}
}
.sousuo-bottom {
background: #ffffff;
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
padding: 20px 0;
.nav-tabs {
margin: 10px 0;
border-bottom: 1px solid #c5d8ee;
.nav-item {
margin-right: 60px;
&:last-child {
margin-right: 0;
}
.nav-link {
border: 0;
color: #454545;
padding-left: 0;
padding-right: 0;
&.active,
&:hover {
border-bottom: 4px solid #f26335;
color: #f26335;
}
}
}
}
.sousuo-bottom-solt {
padding: 30px 0;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
.sousuo-total {
color: #333333;
font-size: 12px;
}
}
}
}
</style>
\ No newline at end of file
src/views/comps/message.vue 0 → 100644
<template>
<div class="message">
<div class="message-kj" :style="{ width: messageData.width }">
<slot name="body"></slot>
</div>
</div>
</template>
<script>
export default {
props: {
messageData: {
width: "50%",
},
},
};
</script>
<style lang="scss">
.message {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.5);
z-index: 999;
.message-kj {
color: #fff;
padding: 10px;
}
}
</style>
\ No newline at end of file
src/views/comps/modal.vue 0 → 100644
<template>
<div class="dialog mask">
<div class="dialog-kj" :style="{ width: dialogData.width }">
<div class="dialog-head">
<div class="head-title">{{ dialogData.title }}</div>
<div class="head-operate">
<img src="../../assets/image/common/close.png" alt="" @click="handelClose"/>
</div>
</div>
<div class="dialog-cont">
<slot name="body"></slot>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
dialogData: {
width: '50%',
title: '',
}
},
methods: {
handelClose() {
this.$emit('toFatherClose');
// this.dialogData.close();
}
},
};
</script>
<style lang="scss" scoped>
.dialog {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 999;
&.mask {
background: rgba(0, 0, 0, 0.7);
}
.dialog-kj {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #fff;
border-radius: 4px;
.dialog-head {
display: flex;
align-items: center;
justify-content: space-between;
background: #f26335;
padding: 10px 20px;
border-radius: 4px 4px 0px 0px;
.head-title {
color: #ffffff;
font-size: 14px;
}
.head-operate {
display: flex;
align-items: center;
>*{
cursor: pointer;
}
}
}
.dialog-cont {
padding: 10px 0;
}
}
}
</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