Skip to content

G
gs1
Commit a4db06d7 by 林家欣
Options

首页切图60%

parent 82edc0fa
Showing with 660 additions and 18 deletions
src/App.vue
<template>
<div id="app" class="container-fluid">
<div id="app">
<router-view></router-view>
</div>
</template>
......
src/assets/css/main.scss
......@@ -3,7 +3,4 @@
@import "./_icon.scss";
@import "./_mixin.scss";
@import "./_base.scss";
@import "../../../node_modules/bootstrap/scss/bootstrap";
// @import "../../../node_modules/bootstrap/scss/functions";
// @import "../../../node_modules/bootstrap/scss/variables";
// @import "../../../node_modules/bootstrap/scss/mixins";
@import "../../../node_modules/bootstrap/scss/bootstrap";
\ No newline at end of file
src/components/main.vue
......@@ -29,8 +29,3 @@ export default {
};
</script>
<style lang="scss" scoped>
.router-view{
padding: 20px 0;
}
</style>
src/views/Home/comps/list.vue 0 → 100644
<template>
<div class="list">
<div v-for="(tmp, i) in 10" :key="i" class="row">
<div class="col-lg-8 list-left">
<span></span>
<span>墨玉树上老菌菌业有限公司墨玉树上老菌菌业有限公司</span>
</div>
<div class="col-lg-4 list-right">2020-10-20</div>
</div>
<div class="row">
<div class="col more"><span>更多></span></div>
</div>
</div>
</template>
<style lang="scss" scoped>
.list {
margin: 0;
padding: 0;
.row {
display: flex;
justify-content: space-between;
padding: 8px 0;
margin: 0;
.list-left {
flex: 1;
display: flex;
align-items: center;
@include ellipsis;
span {
display: inline-block;
&:nth-child(1) {
width: 4px;
height: 4px;
background: #f26335;
border-radius: 50%;
margin-right: 10px;
}
&:nth-child(2) {
flex: 1;
@include ellipsis;
}
}
}
.list-right{
text-align: right;
}
}
.more{
text-align: right;
span{
color: #F26335;
font-size: 14px;
}
}
}
</style>
\ No newline at end of file
src/views/Home/index.vue
<template>
<div>
<div class="home">
<div
id="carouselExampleCaptions"
class="banner carousel slide"
data-bs-ride="carousel"
>
<div class="carousel-indicators">
<button
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="0"
class="active"
aria-current="true"
aria-label="Slide 1"
></button>
<button
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="1"
aria-label="Slide 2"
></button>
<button
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="2"
aria-label="Slide 3"
></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img
src="../../assets/image/home/banner.png"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption">
<div class="container">
<div class="carousel-title">商品条码</div>
<div class="row">
<p class="col-lg-7 carousel-note">
商品条码发展到现在，已经完全构成了一套成熟的技术体系（全球统一编码标识系统，简称GS1系统），不仅有编码，还有自动识别技术和数据交换。目前，这套体系已经在商业零售、加工制造、物流配送、电子商务等经济领域得到了成功应用。近年来，随着信息技术与智能手机的日益发展，更是扩展到了数据传输、产品质量和消费者安全服务等领域。
</p>
</div>
<button class="carousel-btn">了解更多</button>
</div>
</div>
</div>
<div class="carousel-item">
<img
src="../../assets/image/home/banner.png"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption">
<div class="container">
<div class="carousel-title">商品条码2</div>
<div class="row">
<p class="col-lg-7 carousel-note">
商品条码发展到现在，已经完全构成了一套成熟的技术体系（全球统一编码标识系统，简称GS1系统），不仅有编码，还有自动识别技术和数据交换。目前，这套体系已经在商业零售、加工制造、物流配送、电子商务等经济领域得到了成功应用。近年来，随着信息技术与智能手机的日益发展，更是扩展到了数据传输、产品质量和消费者安全服务等领域。
</p>
</div>
<button class="carousel-btn">了解更多</button>
</div>
</div>
</div>
<div class="carousel-item">
<img
src="../../assets/image/home/banner.png"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption">
<div class="container">
<div class="carousel-title">商品条码3</div>
<div class="row">
<p class="col-lg-7 carousel-note">
商品条码发展到现在，已经完全构成了一套成熟的技术体系（全球统一编码标识系统，简称GS1系统），不仅有编码，还有自动识别技术和数据交换。目前，这套体系已经在商业零售、加工制造、物流配送、电子商务等经济领域得到了成功应用。近年来，随着信息技术与智能手机的日益发展，更是扩展到了数据传输、产品质量和消费者安全服务等领域。
</p>
</div>
<button class="carousel-btn">了解更多</button>
</div>
</div>
</div>
</div>
</div>
<div class="bgWhite padding40">
<div class="container">
<div class="row">
<div class="col-lg-8">
<div
id="carouselExampleDark"
class="jiaodiantu carousel carousel-dark slide"
data-bs-ride="carousel"
>
<div class="carousel-indicators">
<button
type="button"
data-bs-target="#carouselExampleDark"
data-bs-slide-to="0"
class="active"
aria-current="true"
aria-label="Slide 1"
></button>
<button
type="button"
data-bs-target="#carouselExampleDark"
data-bs-slide-to="1"
aria-label="Slide 2"
></button>
<button
type="button"
data-bs-target="#carouselExampleDark"
data-bs-slide-to="2"
aria-label="Slide 3"
></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img
src="../../assets/image/home/jiaodiantu.png"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption">
<div class="carousel-title">
国家市场监督管理总局赴中国物品编码中心进行追溯工作调研
</div>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img
src="../../assets/image/home/jiaodiantu.png"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption">
<div class="carousel-title">Second slide label</div>
</div>
</div>
<div class="carousel-item">
<img
src="../../assets/image/home/jiaodiantu.png"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption">
<div class="carousel-title">Second slide label</div>
</div>
</div>
</div>
<div class="inverted">
<button
class="carousel-control-prev"
type="button"
data-bs-target="#carouselExampleDark"
data-bs-slide="prev"
>
<img
src="../../assets/image/home/prev.png"
class="d-block w-100"
alt="..."
/>
</button>
</div>
<button
class="carousel-control-next"
type="button"
data-bs-target="#carouselExampleDark"
data-bs-slide="next"
>
<img
src="../../assets/image/home/next.png"
class="d-block w-100"
alt="..."
/>
</button>
</div>
</div>
<div class="col-lg-4">
<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>
<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>
<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="tab-content" id="myTabContent">
<div
class="tab-pane fade show active"
id="home"
role="tabpanel"
aria-labelledby="home-tab"
>
<list />
</div>
<div
class="tab-pane fade"
id="profile"
role="tabpanel"
aria-labelledby="profile-tab"
>
<list />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row padding30">
<div class="col-lg-8">
<div class="ywdt">
<div class="cate">业务大厅</div>
<div class="row">
<div class="col-lg-6 wbsxtcy bgWhite">
<div class="ywdt-cate">
<span>我还不是系统成员</span>
<span>（企业初次申请）</span>
</div>
<button class="wbsxtcy-btn">我要申请商品条码</button>
<div class="row ywdt-kj">
<div class="col-lg-6" v-for="(tmp, i) in 4" :key="i">
<div class="ywdt-tp">
<img
src="../../assets/image/home/wbsxtcy-ico1.png"
alt=""
/>
</div>
<div class="ywdt-bt">收费公示</div>
</div>
</div>
</div>
<div class="col-lg-6 wsxtcy bgWhite">
<div class="ywdt-cate">
<span>我是系统成员</span>
<span>（成员专区）</span>
</div>
<div class="row ywdt-kj">
<div class="col-lg-6" v-for="(tmp, i) in 6" :key="i">
<div class="ywdt-tp">
<img
src="../../assets/image/home/wbsxtcy-ico1.png"
alt=""
/>
</div>
<div class="ywdt-bt">收费公示</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 wsylqy bgWhite">
<div class="ywdt-cate">
<span>我是医疗企业</span>
</div>
<div class="row ywdt-kj">
<div class="col-lg-6" v-for="(tmp, i) in 2" :key="i">
<div class="ywdt-tp">
<img
src="../../assets/image/home/wbsxtcy-ico1.png"
alt=""
/>
</div>
<div class="ywdt-bt">收费公示</div>
</div>
</div>
</div>
<div class="col-lg-6 kjywblzq bgWhite">
<div class="ywdt-cate">
<span>跨境业务办理专区</span>
</div>
<div class="row ywdt-kj">
<div class="col-lg-6" v-for="(tmp, i) in 2" :key="i">
<div class="ywdt-tp">
<img
src="../../assets/image/home/wbsxtcy-ico1.png"
alt=""
/>
</div>
<div class="ywdt-bt">收费公示</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="dzfw">
<div class="cate">定制服务</div>
<div class="bgWhite container">
<div class="row">
<div class="col-lg-4" v-for="(tmp, i) in 12" :key="i">
<div class="dzfw-border">
<div class="dzfw-tp">
<img src="../../assets/image/home/Gds.png" alt="" />
</div>
<div class="dzfw-bt">商品信息服务平台</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import list from "./comps/list.vue";
export default {
components: {
list,
},
data() {
return {
}
return {};
},
created() {
console.log(this.$route, 'this.$route');
console.log(this.$route, "this.$route");
},
}
};
</script>
<style lang="scss" scoped>
.home {
.banner {
.carousel-indicators {
[data-bs-target] {
border: 0;
height: 4px;
}
.active {
background: #0e2c6b;
}
}
.carousel-inner {
height: 420px;
.carousel-item {
height: 100%;
}
img {
height: 100%;
}
.carousel-caption {
left: 0;
right: 0;
top: 0;
height: 100%;
text-align: left;
display: flex;
flex-direction: column;
justify-content: center;
.carousel-title {
color: #ffffff;
line-height: 60px;
font-size: 50px;
}
.carousel-note {
font-size: 16px;
color: #ffffff;
line-height: 24px;
margin: 30px 0;
}
.carousel-btn {
width: 112px;
height: 37px;
background: #0e2c6b;
border-radius: 4px;
font-size: 16px;
color: #ffffff;
}
}
}
}
.padding40 {
padding: 40px 0;
}
.padding30 {
padding: 30px 0;
}
.bgWhite {
background: $bg-color;
}
.jiaodiantu {
.carousel-indicators {
margin: 0;
display: inline-block;
position: absolute;
bottom: 0;
right: 10px;
left: auto;
[data-bs-target] {
border: 0;
width: 7px;
height: 7px;
background: #fff;
opacity: 1;
}
.active {
background: #f26335;
}
}
.carousel-inner {
.carousel-caption {
left: 10px;
right: 0;
bottom: 0;
text-align: left;
padding: 0;
.carousel-title {
font-size: 18px;
color: rgba(255, 255, 255, 1);
}
}
}
.carousel-control-prev,
.carousel-control-next {
opacity: 1;
width: 40px;
height: 40px;
position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0 10px;
img {
width: 100%;
height: 100%;
}
}
}
.nav-tabs {
border-bottom: 1px solid #c5d8ee;
display: flex;
justify-content: space-between;
.nav-item {
flex: 1;
&:last-child {
span {
border: 0;
}
}
}
.nav-link {
border: 0;
color: #454545;
width: 100%;
padding: 0;
padding-bottom: 10px;
&.active,
&:hover {
border-bottom: 3px solid #f26335;
color: #04408d;
}
span {
display: inline-block;
width: 100%;
border-right: 1px solid #e1e6f0;
}
}
}
.cate {
color: #0e2c6b;
font-size: 28px;
margin-bottom: 30px;
}
.ywdt {
.row {
margin: 0;
> div {
padding: 0;
}
}
.ywdt-cate {
display: flex;
align-items: center;
flex-wrap: wrap;
background: url("../../assets/image/home/ywdt-cate.png") no-repeat 100%
100%;
height: 73px;
padding-left: 24px;
span {
&:nth-child(1) {
color: #0e2c6b;
font-size: 18px;
}
&:nth-child(2) {
color: #0e2c6b;
font-size: 14px;
margin-left: 10px;
}
}
}
.wbsxtcy {
text-align: center;
.wbsxtcy-btn {
width: 90%;
margin: 0 auto;
height: 40px;
background: #f26335;
border-radius: 4px;
color: #ffffff;
font-size: 16px;
margin-top: 20px;
}
}
.ywdt-kj {
padding: 10px 0;
> div {
margin: 10px 0;
text-align: center;
}
.ywdt-bt {
color: #0e2c6b;
font-size: 14px;
margin-top: 20px;
}
}
.wsxtcy {
.ywdt-bt {
margin-top: 10px;
}
}
.wsylqy,
.kjywblzq {
.ywdt-cate {
height: 55px;
}
}
}
.dzfw {
.row {
> div {
padding: 0 10px;
@media screen and (min-width: 992px) {
background: url("../../assets/image/home/line.png") no-repeat right
center;
&:nth-child(-n + 3) {
.dzfw-border {
border: 0;
}
}
}
&:nth-child(3n) {
background: none;
}
.dzfw-border {
text-align: center;
padding: 25px 0;
border-top: 1px solid #f0f5fa;
}
.dzfw-bt {
font-size: 12px;
margin-top: 20px;
}
}
}
}
}
</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