Skip to content

G
gs1
Commit 0fe56507 by tang
Options

feat: 条码微站【100%】

parent c0d172b8
Showing with 306 additions and 100 deletions
src/router/index.js
...@@ -276,6 +276,31 @@ const routes = [ ...@@ -276,6 +276,31 @@ const routes = [
], ],
}, },
{ {
// 查询中心
path: "/Service",
name: "Service",
component: main,
redirect: "/Service/BarcodeV",
meta: {
name: "查询中心",
},
children: [
{
path: "/",
component: () => import("@/views/Service/index"),
children: [
{
path: "BarcodeV",
component: () => import("@/views/Service/barcodeV"),
meta: {
name: "条码微站",
},
},
],
},
],
},
{
path: "/login", path: "/login",
name: "login", name: "login",
component: () => import("@/views/User/index"), component: () => import("@/views/User/index"),
......
src/views/Search/index.vue
<template> <template>
<div class="nav-search container marginTop20 mb-4" style="position: relative"> <div class="nav-search container marginTop20 mb-5" style="position: relative">
<breadcrumb/> <breadcrumb/>
<div class="row"> <div class="row">
<div class="col-lg-3"> <div class="col-lg-3">
......
src/views/Search/style/common.scss
.search-content { .nav-search {
color: #414345; .search-content {
background: #ffffff;
border-radius: 4px;
border: 1px solid #c5d8ee;
> .title {
padding: 20px 30px;
font-size: 18px;
font-weight: 500;
color: #454545;
line-height: 25px;
border-bottom: 1px solid #f3f3f3;
}
.el-tabs__item {
color: #454545;
}
.el-form-item__label {
color: #414345; color: #414345;
} background: #ffffff;
border-radius: 4px;
.body { border: 1px solid #c5d8ee;
padding: 20px 30px;
}
.notice {
padding: 20px 30px;
background: rgba(242, 99, 53, 0.03);
border-radius: 0px 0px 2px 2px;
> .title { > .title {
font-size: 16px; padding: 20px 30px;
font-size: 18px;
font-weight: 500; font-weight: 500;
color: #f26335; color: #454545;
line-height: 22px; line-height: 25px;
border-bottom: 1px solid #f3f3f3;
} }
.content-wrapper { .el-tabs__item {
margin-top: 29px; color: #454545;
font-size: 14px; }
font-weight: 400;
overflow: hidden;
p + p { .el-form-item__label {
margin-top: 30px; color: #414345;
} }
img { .body {
width: 113px; padding: 20px 30px;
margin-left: 30px;
}
} }
}
// 查询结果 .notice {
.result-box { padding: 20px 30px;
font-size: 14px; background: rgba(242, 99, 53, 0.03);
font-weight: 400; border-radius: 0px 0px 2px 2px;
color: #414345;
line-height: 28px;
}
.result-box-title { > .title {
height: 40px; font-size: 16px;
padding: 0 20px; font-weight: 500;
line-height: 40px; color: #f26335;
font-size: 14px; line-height: 22px;
font-weight: 600; }
color: #f26335;
background: #fef1ec;
}
.result-box-body { .content-wrapper {
border: 1px solid #ebebeb; margin-top: 29px;
border-top: none; font-size: 14px;
background-color: white; font-weight: 400;
padding: 20px; overflow: hidden;
> .title { p + p {
position: relative; margin-top: 30px;
height: 28px; }
font-size: 16px;
font-weight: 500; img {
color: #f26335; width: 113px;
margin-left: 30px;
}
}
}
// 查询结果
.result-box {
font-size: 14px;
font-weight: 400;
color: #414345;
line-height: 28px; line-height: 28px;
padding-left: 14px; }
margin-bottom: 20px;
.result-box-title {
&::before { height: 40px;
content: ""; padding: 0 20px;
position: absolute; line-height: 40px;
left: 0; font-size: 14px;
top: 6px; font-weight: 600;
width: 4px; color: #f26335;
height: 16px; background: #fef1ec;
background: #04408d; }
.result-box-body {
border: 1px solid #ebebeb;
border-top: none;
background-color: white;
padding: 20px;
> .title {
position: relative;
height: 28px;
font-size: 16px;
font-weight: 500;
color: #f26335;
line-height: 28px;
padding-left: 14px;
margin-bottom: 20px;
&::before {
content: "";
position: absolute;
left: 0;
top: 6px;
width: 4px;
height: 16px;
background: #04408d;
}
} }
} }
} }
}
.nav-search {
.el-tabs__item.is-active { .el-tabs__item.is-active {
color: #04408D; color: #04408D;
} }
......
src/views/Service/barcodeV.vue 0 → 100644
<template>
<div class="search-content barcodev">
<div class="title">境内条码信息公告查询</div>
<div class="body" style="padding-top: 9px">
<p>
条码微站是由中国物品编码中心基于国家标准打造的商品二维码综合服务平台，旨在为企业打通线上线下的沟通渠道，帮助企业轻松建立官方门户，及时发布商品资讯，令产品理念直达目标客户；通过线上生成商品二维码，在移动互联网环境展示产品、打造品牌、拓展市场，帮助企业在激烈的市场竞争中赢得先机。其核心优势在于为企业提供了权威的商品信息发布渠道，及商品二维码生成平台，通过扫描印制在包装上的二维码，企业可以实现现有资源的全面整合，打通线上线下销售渠道。</p>
<p>
在移动互联的世界，条码微站可以帮助您快速建立起属于自己的移动门户。即使您是初入互联网营销的企业小白，也完全不用担心，无需投入专业网站建设运营人员，只需轻动手指录入商品信息，优质的企业微门户网站即可展现在手机等移动终端。热销展示、新品推介多级产品资讯动态一网打尽,企业新闻、宣传海报品牌宣传深入人心。帮助企业提升品牌形象，降低推广成本，提高经济效益，开拓市场资源。</p>
<img src="./img/tiaomavzhan1.png" alt="">
<span class="barcodev-title">条码微站加入流程</span>
<img src="./img/tiaomavzhan2.png" alt="">
</div>
</div>
</template>
<script>
export default {};
</script>
<style lang="scss">
.barcodev {
p {
font-family: PingFangSC-Regular, PingFang SC;
margin: 20px 0;
font-size: 14px;
font-weight: 400;
color: #414345;
}
img {
width: 100%;
}
.barcodev-title{
display: inline-block;
font-size: 16px;
font-weight: 500;
color: #F26335;
margin: 60px 0 20px;
}
}
</style>
src/views/Service/index.vue
<template> <template>
<div class="container"> <div class="nav-service container marginTop20 mb-5" style="position: relative">
<div class="row"> <breadcrumb/>
导航 <div class="row">
<div class="col-lg-3">
<SubNav/>
</div> </div>
<div class="row"> <div class="col-lg-9">
<div class="col"> <router-view></router-view>
sub_MENU
</div>
<div class="col">
Content
</div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
</script> import SubNav from "../comps/SubNav.vue";
import breadcrumb from "../comps/breadcrumb.vue";
import "./style/common.scss";
import service from "@/components/layout/header/service.js";
<style lang="scss"> export default {
</style> components: {
SubNav,
breadcrumb,
},
created() {
this.$store.commit("system/SET_SUB_NAV", service.children);
},
data() {
return {};
},
};
</script>
src/views/Service/style/common.scss 0 → 100644
.nav-service {
.search-content {
color: #414345;
background: #ffffff;
border-radius: 4px;
border: 1px solid #c5d8ee;
> .title {
padding: 20px 30px;
font-size: 18px;
font-weight: 500;
color: #454545;
line-height: 25px;
border-bottom: 1px solid #f3f3f3;
}
.el-tabs__item {
color: #454545;
}
.el-form-item__label {
color: #414345;
}
.body {
padding: 20px 30px;
}
.notice {
padding: 20px 30px;
background: rgba(242, 99, 53, 0.03);
border-radius: 0px 0px 2px 2px;
> .title {
font-size: 16px;
font-weight: 500;
color: #f26335;
line-height: 22px;
}
.content-wrapper {
margin-top: 29px;
font-size: 14px;
font-weight: 400;
overflow: hidden;
p + p {
margin-top: 30px;
}
img {
width: 113px;
margin-left: 30px;
}
}
}
// 查询结果
.result-box {
font-size: 14px;
font-weight: 400;
color: #414345;
line-height: 28px;
}
.result-box-title {
height: 40px;
padding: 0 20px;
line-height: 40px;
font-size: 14px;
font-weight: 600;
color: #f26335;
background: #fef1ec;
}
.result-box-body {
border: 1px solid #ebebeb;
border-top: none;
background-color: white;
padding: 20px;
> .title {
position: relative;
height: 28px;
font-size: 16px;
font-weight: 500;
color: #f26335;
line-height: 28px;
padding-left: 14px;
margin-bottom: 20px;
&::before {
content: "";
position: absolute;
left: 0;
top: 6px;
width: 4px;
height: 16px;
background: #04408d;
}
}
}
}
.el-tabs__item.is-active {
color: #04408D;
}
.el-table .search-table-hc{
background: #F5F5F5;
padding: 0;
height: 40px;
overflow: hidden;
&+.search-table-hc{
border-left: 1px solid white;
}
}
.hover{
color: #008dbd;
&:hover{
color: #008dbd;
}
}
}
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