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 @@ ...@@ -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 { @mixin ellipsis {
@media screen and (min-width: 992px){ @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> <template>
<div class="home"> <div class="home">
<div <div
id="carouselExampleCaptions" id="banner"
class="banner carousel slide" class="banner carousel slide"
data-bs-ride="carousel" data-bs-ride="carousel"
> >
<div class="carousel-indicators"> <div class="carousel-indicators">
<button <button
type="button" type="button"
data-bs-target="#carouselExampleCaptions" data-bs-target="#banner"
data-bs-slide-to="0" data-bs-slide-to="0"
class="active" class="active"
aria-current="true" aria-current="true"
...@@ -16,13 +16,13 @@ ...@@ -16,13 +16,13 @@
></button> ></button>
<button <button
type="button" type="button"
data-bs-target="#carouselExampleCaptions" data-bs-target="#banner"
data-bs-slide-to="1" data-bs-slide-to="1"
aria-label="Slide 2" aria-label="Slide 2"
></button> ></button>
<button <button
type="button" type="button"
data-bs-target="#carouselExampleCaptions" data-bs-target="#banner"
data-bs-slide-to="2" data-bs-slide-to="2"
aria-label="Slide 3" aria-label="Slide 3"
></button> ></button>
...@@ -89,14 +89,14 @@ ...@@ -89,14 +89,14 @@
<div class="row"> <div class="row">
<div class="col-lg-8"> <div class="col-lg-8">
<div <div
id="carouselExampleDark" id="jiaodiantu"
class="jiaodiantu carousel carousel-dark slide" class="jiaodiantu carousel carousel-dark slide"
data-bs-ride="carousel" data-bs-ride="carousel"
> >
<div class="carousel-indicators"> <div class="carousel-indicators">
<button <button
type="button" type="button"
data-bs-target="#carouselExampleDark" data-bs-target="#jiaodiantu"
data-bs-slide-to="0" data-bs-slide-to="0"
class="active" class="active"
aria-current="true" aria-current="true"
...@@ -104,19 +104,19 @@ ...@@ -104,19 +104,19 @@
></button> ></button>
<button <button
type="button" type="button"
data-bs-target="#carouselExampleDark" data-bs-target="#jiaodiantu"
data-bs-slide-to="1" data-bs-slide-to="1"
aria-label="Slide 2" aria-label="Slide 2"
></button> ></button>
<button <button
type="button" type="button"
data-bs-target="#carouselExampleDark" data-bs-target="#jiaodiantu"
data-bs-slide-to="2" data-bs-slide-to="2"
aria-label="Slide 3" aria-label="Slide 3"
></button> ></button>
</div> </div>
<div class="carousel-inner"> <div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000"> <div class="carousel-item active">
<img <img
src="../../assets/image/home/jiaodiantu.png" src="../../assets/image/home/jiaodiantu.png"
class="d-block w-100" class="d-block w-100"
...@@ -128,7 +128,7 @@ ...@@ -128,7 +128,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="carousel-item" data-bs-interval="2000"> <div class="carousel-item" >
<img <img
src="../../assets/image/home/jiaodiantu.png" src="../../assets/image/home/jiaodiantu.png"
class="d-block w-100" class="d-block w-100"
...@@ -153,7 +153,7 @@ ...@@ -153,7 +153,7 @@
<button <button
class="carousel-control-prev" class="carousel-control-prev"
type="button" type="button"
data-bs-target="#carouselExampleDark" data-bs-target="#jiaodiantu"
data-bs-slide="prev" data-bs-slide="prev"
> >
<img <img
...@@ -167,7 +167,7 @@ ...@@ -167,7 +167,7 @@
<button <button
class="carousel-control-next" class="carousel-control-next"
type="button" type="button"
data-bs-target="#carouselExampleDark" data-bs-target="#jiaodiantu"
data-bs-slide="next" data-bs-slide="next"
> >
<img <img
...@@ -179,7 +179,7 @@ ...@@ -179,7 +179,7 @@
</div> </div>
</div> </div>
<div class="col-lg-4"> <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"> <li class="nav-item" role="presentation">
<button <button
class="nav-link active" class="nav-link active"
...@@ -260,98 +260,330 @@ ...@@ -260,98 +260,330 @@
</div> </div>
</div> </div>
<div class="container"> <div class="container">
<div class="row padding30"> <div class="padding30">
<div class="col-lg-8"> <div class="row">
<div class="ywdt"> <div class="col-lg-8">
<div class="cate">业务大厅</div> <div class="ywdt">
<div class="row"> <div class="cate">业务大厅</div>
<div class="col-lg-6 wbsxtcy bgWhite"> <div class="row">
<div class="ywdt-cate"> <div class="col-lg-6 wbsxtcy bgWhite">
<span>我还不是系统成员</span> <div class="ywdt-cate">
<span>（企业初次申请）</span> <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>
<button class="wbsxtcy-btn">我要申请商品条码</button> <div class="col-lg-6 wsxtcy bgWhite">
<div class="row ywdt-kj"> <div class="ywdt-cate">
<div class="col-lg-6" v-for="(tmp, i) in 4" :key="i"> <span>我是系统成员</span>
<div class="ywdt-tp"> <span>（成员专区）</span>
<img </div>
src="../../assets/image/home/wbsxtcy-ico1.png" <div class="row ywdt-kj">
alt="" <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 class="ywdt-bt">收费公示</div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-6 wsxtcy bgWhite"> <div class="row">
<div class="ywdt-cate"> <div class="col-lg-6 wsylqy bgWhite">
<span>我是系统成员</span> <div class="ywdt-cate">
<span>（成员专区）</span> <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 class="row ywdt-kj"> <div class="col-lg-6 kjywblzq bgWhite">
<div class="col-lg-6" v-for="(tmp, i) in 6" :key="i"> <div class="ywdt-cate">
<div class="ywdt-tp"> <span>跨境业务办理专区</span>
<img </div>
src="../../assets/image/home/wbsxtcy-ico1.png" <div class="row ywdt-kj">
alt="" <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 class="ywdt-bt">收费公示</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> </div>
<div class="col-lg-6 wsylqy bgWhite"> <div class="col-lg-4">
<div class="ywdt-cate"> <div class="dzfw">
<span>我是医疗企业</span> <div class="cate">定制服务</div>
</div> <div class="bgWhite container">
<div class="row ywdt-kj"> <div class="row">
<div class="col-lg-6" v-for="(tmp, i) in 2" :key="i"> <div class="col-lg-4" v-for="(tmp, i) in 12" :key="i">
<div class="ywdt-tp"> <div class="dzfw-border">
<img <div class="dzfw-tp">
src="../../assets/image/home/wbsxtcy-ico1.png" <img src="../../assets/image/home/Gds.png" alt="" />
alt="" </div>
/> <div class="dzfw-bt">商品信息服务平台</div>
</div> </div>
<div class="ywdt-bt">收费公示</div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-6 kjywblzq bgWhite"> </div>
<div class="ywdt-cate"> </div>
<span>跨境业务办理专区</span> </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>
<div class="row ywdt-kj"> </div>
<div class="col-lg-6" v-for="(tmp, i) in 2" :key="i"> <div
<div class="ywdt-tp"> class="tab-pane fade"
<img id="cpxx"
src="../../assets/image/home/wbsxtcy-ico1.png" role="tabpanel"
alt="" 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>
<div class="ywdt-bt">收费公示</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-4"> </div>
<div class="dzfw"> </div>
<div class="cate">定制服务</div> <!-- 商品全球身份证 -->
<div class="bgWhite container"> <div class="spqqsfz">
<div class="row"> <div class="container">
<div class="col-lg-4" v-for="(tmp, i) in 12" :key="i"> <div class="spqqsfz-cate">
<div class="dzfw-border"> <div class="spqqsfz-cate-left">商品全球身份证</div>
<div class="dzfw-tp"> <div class="spqqsfz-cate-right">更多></div>
<img src="../../assets/image/home/Gds.png" alt="" /> </div>
</div> <div class="spqqsfz-cont">
<div class="dzfw-bt">商品信息服务平台</div> <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>
</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> </div>
</div> </div>
...@@ -360,19 +592,45 @@ ...@@ -360,19 +592,45 @@
</template> </template>
<script> <script>
import list from "./comps/list.vue"; 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 { export default {
components: { components: {
list, list,
list2,
yylyList,
otherList,
}, },
data() { data() {
return {}; return {
keywords: "",
chaxun: {
type: "",
options: [
{
label: "根据厂商名称查询",
value: "根据厂商名称查询",
},
],
keywords: "",
},
};
}, },
created() { created() {
console.log(this.$route, "this.$route"); console.log(this.$route, "this.$route");
}, },
}; };
</script> </script>
<style lang="scss">
.home {
.chaxun-left {
@include elInput(40px, #0e2c6b, #0e2c6b, #fff, #059ede, 4px);
@include elSelect(#0e2c6b, #0e2c6b);
}
}
</style>
<style lang="scss" scoped> <style lang="scss" scoped>
.home { .home {
.banner { .banner {
...@@ -424,12 +682,18 @@ export default { ...@@ -424,12 +682,18 @@ export default {
} }
} }
} }
.padding18 {
padding: 18px 0;
}
.padding40 { .padding40 {
padding: 40px 0; padding: 40px 0;
} }
.padding30 { .padding30 {
padding: 30px 0; padding: 30px 0;
} }
.marginTop10 {
margin-top: 10px;
}
.bgWhite { .bgWhite {
background: $bg-color; background: $bg-color;
} }
...@@ -480,12 +744,36 @@ export default { ...@@ -480,12 +744,36 @@ export default {
} }
} }
} }
.nav-tabs { .tabs1 {
border-bottom: 1px solid #c5d8ee;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
border-bottom: 1px solid #c5d8ee;
.nav-item { .nav-item {
flex: 1; 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 { &:last-child {
span { span {
border: 0; border: 0;
...@@ -506,7 +794,6 @@ export default { ...@@ -506,7 +794,6 @@ export default {
span { span {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
border-right: 1px solid #e1e6f0;
} }
} }
} }
...@@ -607,5 +894,130 @@ export default { ...@@ -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> </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