Skip to content

G
gs1
Commit 57357940 by Tang
Options

Merge branch 'master' of https://gitee.com/gs1-office-web-sit/gs1

parents 0a35ac7f c2b6ebb6
Showing with 710 additions and 82 deletions
src/assets/css/_mixin.scss
......@@ -261,6 +261,77 @@
}
@mixin elInput(
$height: calcvh(27),
$color: #9fceff,
$placeholderColor: #9fceff,
$background: rgba(0, 28, 103, 0.56),
$borderColor: #059ede,
$borderRadius: 0,
) {
.el-input {
font-size: calcvw(14);
.el-input__clear {
color: $color;
&:hover {
color: $color;
}
}
}
.el-input__inner {
height: $height;
background: $background;
border: 1px solid $borderColor;
color: $color;
border-radius: $borderRadius;
&:hover {
border: 1px solid $borderColor;
}
&:focus {
border-color: $borderColor;
}
&::placeholder {
color: $placeholderColor;
}
}
.el-input__icon {
line-height: $height;
}
}
@mixin elSelect($color: #9fceff, $borderColor: #059ede) {
.el-select {
width: 100%;
&:hover {
.el-input__inner {
border-color: $borderColor;
}
}
.el-input.is-focus {
.el-input__inner {
border-color: $borderColor;
}
}
.el-input {
.el-input__inner {
&:hover {
border-color: $borderColor;
}
}
.el-select__caret {
color: $color;
}
}
.el-input__inner:focus {
border-color: $borderColor;
}
}
.el-icon-arrow-up:before {
content: '\e78f';
color: $color;
}
}
// 超宽显示省略号
@mixin ellipsis {
@media screen and (min-width: 992px){
......
src/views/Home/comps/list2.vue 0 → 100644
<template>
<div class="list">
<div v-for="(tmp, i) in list" :key="i" class="row">
<div class="col li">
<span></span>
<span>墨玉树上老菌菌业有限公司墨玉树上老菌菌业有限公司</span>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['list'],
}
</script>
<style lang="scss" scoped>
.list {
margin: 0;
padding: 7px 0;
.row {
display: flex;
justify-content: space-between;
padding: 10px 0;
margin: 0;
.li {
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;
}
}
}
}
}
</style>
\ No newline at end of file
src/views/Home/comps/other-list.vue 0 → 100644
<template>
<div class="list">
<div v-for="(tmp, i) in list" :key="i" class="row">
<div class="col li">
<span></span>
<span>墨玉树上老菌菌业有限公司墨玉树上老菌菌业有限公司</span>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['list'],
}
</script>
<style lang="scss" scoped>
.list {
margin: 0;
padding-bottom: 10px;
.row {
display: flex;
justify-content: space-between;
padding: 2.8px 0;
margin: 0;
.li {
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;
}
}
}
}
}
</style>
\ No newline at end of file
src/views/Home/comps/yyly-list.vue 0 → 100644
<template>
<div class="list">
<div v-for="(tmp, i) in list" :key="i" class="row">
<div class="col li">
<span></span>
<span>墨玉树上老菌菌业有限公司墨玉树上老菌菌业有限公司</span>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['list'],
}
</script>
<style lang="scss" scoped>
.list {
margin: 0;
padding-bottom: 10px;
.row {
display: flex;
justify-content: space-between;
padding: 5.5px 0;
margin: 0;
.li {
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;
}
}
}
}
}
</style>
\ No newline at end of file
src/views/Home/index.vue
<template>
<div class="home">
<div
id="carouselExampleCaptions"
id="banner"
class="banner carousel slide"
data-bs-ride="carousel"
>
<div class="carousel-indicators">
<button
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-target="#banner"
data-bs-slide-to="0"
class="active"
aria-current="true"
......@@ -16,13 +16,13 @@
></button>
<button
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-target="#banner"
data-bs-slide-to="1"
aria-label="Slide 2"
></button>
<button
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-target="#banner"
data-bs-slide-to="2"
aria-label="Slide 3"
></button>
......@@ -89,14 +89,14 @@
<div class="row">
<div class="col-lg-8">
<div
id="carouselExampleDark"
id="jiaodiantu"
class="jiaodiantu carousel carousel-dark slide"
data-bs-ride="carousel"
>
<div class="carousel-indicators">
<button
type="button"
data-bs-target="#carouselExampleDark"
data-bs-target="#jiaodiantu"
data-bs-slide-to="0"
class="active"
aria-current="true"
......@@ -104,19 +104,19 @@
></button>
<button
type="button"
data-bs-target="#carouselExampleDark"
data-bs-target="#jiaodiantu"
data-bs-slide-to="1"
aria-label="Slide 2"
></button>
<button
type="button"
data-bs-target="#carouselExampleDark"
data-bs-target="#jiaodiantu"
data-bs-slide-to="2"
aria-label="Slide 3"
></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<div class="carousel-item active">
<img
src="../../assets/image/home/jiaodiantu.png"
class="d-block w-100"
......@@ -128,7 +128,7 @@
</div>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<div class="carousel-item" >
<img
src="../../assets/image/home/jiaodiantu.png"
class="d-block w-100"
......@@ -153,7 +153,7 @@
<button
class="carousel-control-prev"
type="button"
data-bs-target="#carouselExampleDark"
data-bs-target="#jiaodiantu"
data-bs-slide="prev"
>
<img
......@@ -167,7 +167,7 @@
<button
class="carousel-control-next"
type="button"
data-bs-target="#carouselExampleDark"
data-bs-target="#jiaodiantu"
data-bs-slide="next"
>
<img
......@@ -179,7 +179,7 @@
</div>
</div>
<div class="col-lg-4">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<ul class="nav nav-tabs tabs1" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button
class="nav-link active"
......@@ -260,98 +260,330 @@
</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 class="padding30">
<div class="row">
<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>
<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 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 class="ywdt-bt">收费公示</div>
</div>
</div>
</div>
<div class="col-lg-6 wsxtcy bgWhite">
<div class="ywdt-cate">
<span>我是系统成员</span>
<span>（成员专区）</span>
<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="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 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 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="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 class="ywdt-bt">收费公示</div>
</div>
</div>
</div>
<div class="col-lg-6 kjywblzq bgWhite">
<div class="ywdt-cate">
<span>跨境业务办理专区</span>
</div>
</div>
</div>
<div class="bgWhite marginTop10 padding18">
<div class="container">
<ul class="nav nav-tabs tabs2 row" id="myTab" role="tablist">
<li class="nav-item col-lg-2" role="presentation">
<button
class="nav-link active"
id="home-tab"
data-bs-toggle="tab"
data-bs-target="#csxx"
type="button"
role="tab"
aria-controls="home"
aria-selected="true"
>
<span>厂商信息</span>
</button>
</li>
<li class="nav-item col-lg-2" role="presentation">
<button
class="nav-link"
id="profile-tab"
data-bs-toggle="tab"
data-bs-target="#cpxx"
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="csxx"
role="tabpanel"
aria-labelledby="home-tab"
>
<div class="chaxun">
<div class="chaxun-kj">
<div class="row">
<div class="col-lg-2 chaxun-left">
<el-select
v-model="chaxun.type"
placeholder="请选择"
clearable
>
<el-option
v-for="(item, i) in chaxun.options"
:key="i"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="col-lg-7 chaxun-middle">
<el-input
placeholder="请输入厂商名称"
v-model="chaxun.keywords"
clearable
>
</el-input>
</div>
<div class="col-lg-3 chaxun-right">
<button>境内条码查询</button>
</div>
</div>
</div>
</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="tab-pane fade"
id="cpxx"
role="tabpanel"
aria-labelledby="profile-tab"
>
<div class="chaxun">
<div class="chaxun-kj">
<div class="row">
<div class="col-lg-2 chaxun-left">
<el-select v-model="chaxun.type" placeholder="请选择">
<el-option
v-for="(item, i) in chaxun.options"
:key="i"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="col-lg-7 chaxun-middle">
<el-input
placeholder="请输入厂商名称"
v-model="chaxun.keywords"
clearable
>
</el-input>
</div>
<div class="col-lg-3 chaxun-right">
<button>境内条码查询</button>
</div>
</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 class="spqqsfz">
<div class="container">
<div class="spqqsfz-cate">
<div class="spqqsfz-cate-left">商品全球身份证</div>
<div class="spqqsfz-cate-right">更多></div>
</div>
<div class="spqqsfz-cont">
<div class="row">
<div class="col offset-lg-4">kiddy color重彩油画棒A14018</div>
</div>
<div class="row">
<div class="col-8 offset-lg-4">
<div class="pp">品牌：kiddy color</div>
<div class="jhl">净含量：一盒</div>
</div>
<div class="col-8 offset-lg-4">
公司名称：梁介福(广东)药业有限公司
</div>
</div>
<div class="row">
<div class="col offset-lg-4">
<button>更多商品信息</button>
</div>
</div>
</div>
</div>
</div>
<!-- 首页下半部 -->
<div class="home-bottom">
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="djwh">
<div class="home-bottom-cate">党建文化</div>
<div class="djwh-tp">
<img src="../../assets/image/home/dangjianwenhua.png" alt="" />
</div>
<list2 :list="5" />
</div>
</div>
<div class="col-lg-3">
<div class="ztjj">
<div class="home-bottom-cate">专题聚焦</div>
<div class="djwh-tp">
<img src="../../assets/image/home/zhuantijujiao.png" alt="" />
</div>
<list2 :list="5" />
</div>
</div>
<div class="col-lg-3">
<div class="yyly">
<div class="home-bottom-cate">应用领域</div>
<yylyList :list="11" />
</div>
</div>
<div class="col-lg-3">
<div class="other">
<div class="home-bottom-cate">
质检中心/协会/杂志社/标准委/其他
</div>
<otherList :list="13" />
</div>
</div>
</div>
<div class="advert">
<div
id="advert"
class="carousel slide"
data-bs-ride="carousel"
data-bs-interval="false"
>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-lg-4">
<img src="../../assets/image/home/advert-tp1.png" />
</div>
<div class="col-lg-4">
<img src="../../assets/image/home/advert-tp2.png" />
</div>
<div class="col-lg-4">
<img src="../../assets/image/home/advert-tp3.png" />
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-lg-4">
<img src="../../assets/image/home/advert-tp3.png" />
</div>
<div class="col-lg-4">
<img src="../../assets/image/home/advert-tp2.png" />
</div>
<div class="col-lg-4">
<img src="../../assets/image/home/advert-tp1.png" />
</div>
</div>
</div>
</div>
<button
class="carousel-control-prev"
type="button"
data-bs-target="#advert"
data-bs-slide="prev"
>
<img src="../../assets/image/home/advert-zuo.png" alt="" />
</button>
<button
class="carousel-control-next"
type="button"
data-bs-target="#advert"
data-bs-slide="next"
>
<img src="../../assets/image/home/advert-you.png" alt="" />
</button>
</div>
</div>
</div>
......@@ -360,19 +592,45 @@
</template>
<script>
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";
export default {
components: {
list,
list2,
yylyList,
otherList,
},
data() {
return {};
return {
keywords: "",
chaxun: {
type: "",
options: [
{
label: "根据厂商名称查询",
value: "根据厂商名称查询",
},
],
keywords: "",
},
};
},
created() {
console.log(this.$route, "this.$route");
},
};
</script>
<style lang="scss">
.home {
.chaxun-left {
@include elInput(40px, #0e2c6b, #0e2c6b, #fff, #059ede, 4px);
@include elSelect(#0e2c6b, #0e2c6b);
}
}
</style>
<style lang="scss" scoped>
.home {
.banner {
......@@ -424,12 +682,18 @@ export default {
}
}
}
.padding18 {
padding: 18px 0;
}
.padding40 {
padding: 40px 0;
}
.padding30 {
padding: 30px 0;
}
.marginTop10 {
margin-top: 10px;
}
.bgWhite {
background: $bg-color;
}
......@@ -480,12 +744,36 @@ export default {
}
}
}
.nav-tabs {
border-bottom: 1px solid #c5d8ee;
.tabs1 {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #c5d8ee;
.nav-item {
flex: 1;
}
span {
border-right: 1px solid #e1e6f0;
}
}
.tabs2 {
border: 0;
&.row {
margin: 0;
> li {
padding: 0;
}
}
.nav-item {
border-bottom: 1px solid #c5d8ee;
}
@media screen and(min-width:992px) {
span {
border-right: 1px solid #e1e6f0;
}
}
}
.nav-tabs {
.nav-item {
&:last-child {
span {
border: 0;
......@@ -506,7 +794,6 @@ export default {
span {
display: inline-block;
width: 100%;
border-right: 1px solid #e1e6f0;
}
}
}
......@@ -607,5 +894,130 @@ export default {
}
}
}
.chaxun {
padding: 16px 0;
background: #f0f5fa;
border-radius: 6px;
margin-top: 20px;
.chaxun-kj {
width: 95%;
margin: 0 auto;
}
.row {
margin: 0;
> * {
padding: 0;
}
}
.chaxun-right {
height: 40px;
background: #f26335;
border-radius: 4px;
button {
width: 100%;
height: 100%;
background: none;
border: 0;
color: #ffffff;
font-size: 16px;
}
}
}
.spqqsfz {
background: #2f579c url("../../assets/image/home/spqqsfz-bj.png") no-repeat;
height: 433px;
background-size: auto 100%;
background-position: center;
.spqqsfz-cate {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
color: #ffffff;
font-size: 24px;
padding: 30px 0;
}
.spqqsfz-cont {
background: url("../../assets/image/home/spqqsfz-bj2.png") no-repeat;
height: 300px;
background-size: 100% 100%;
background-position: center;
display: flex;
flex-direction: column;
justify-content: space-around;
.row {
color: #ffffff;
&:nth-child(1) {
font-size: 24px;
}
&:nth-child(2) {
font-size: 16px;
> div {
display: flex;
align-items: center;
flex-wrap: wrap;
&:nth-child(2) {
margin-top: 10px;
}
}
.pp {
font-size: 18px;
margin-right: 35px;
}
}
&:nth-child(3) {
button {
width: 156px;
height: 41px;
background: #ffffff;
border-radius: 4px;
color: #f26335;
font-size: 18px;
}
}
}
}
}
.home-bottom {
padding: 40px 0;
.row {
> * {
div {
background: #fff;
}
}
}
.home-bottom-cate {
color: #0e2c6b;
font-size: 16px;
padding: 15px 0 15px 20px;
}
.djwh-tp {
img {
width: 100%;
}
}
.advert {
margin-top: 40px;
.carousel-item {
img {
width: 100%;
}
}
.carousel-control-prev,
.carousel-control-next {
opacity: 1;
width: 24px;
height: 50px;
position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0;
img {
width: 100%;
height: 100%;
}
}
}
}
}
</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