Skip to content

G
gs1
Commit eb7c20ff by 林家欣
Options

修改首页调整后的样式50%

parent 7faf34f8
Showing with 239 additions and 148 deletions
src/axios/module/business.js
...@@ -3,7 +3,7 @@ import { ...@@ -3,7 +3,7 @@ import {
} from "../fetch.js" } from "../fetch.js"
const Prefix = process.env.NODE_ENV === 'development' ? '/gs1' : '/gs1'; const Prefix = process.env.NODE_ENV === 'development' ? '/gs1' : '';
// 右侧表格下载功能 // 右侧表格下载功能
const businessDownLoad = (params = {}) => { const businessDownLoad = (params = {}) => {
......
src/axios/module/home.js
...@@ -3,7 +3,7 @@ import { ...@@ -3,7 +3,7 @@ import {
} from "../fetch.js" } from "../fetch.js"
const Prefix = process.env.NODE_ENV === 'development' ? '/gs1' : '/gs1'; const Prefix = process.env.NODE_ENV === 'development' ? '/gs1' : '';
// 首页大轮播图 // 首页大轮播图
const homeBigImages = (params = {}) => { const homeBigImages = (params = {}) => {
......
src/views/Home/comps/list.vue
...@@ -8,7 +8,9 @@ ...@@ -8,7 +8,9 @@
<div class="col-lg-4 list-right">{{tmp.time}}</div> <div class="col-lg-4 list-right">{{tmp.time}}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col more" @click="handelMore"><span>更多></span></div> <div class="col">
<div @click="handelMore" class="more float-end"><span>了解更多</span><img src="../../../assets/image/home/more-arrow.png" alt=""></div>
</div>
</div> </div>
</div> </div>
</template> </template>
...@@ -66,13 +68,22 @@ export default { ...@@ -66,13 +68,22 @@ export default {
} }
} }
.more{ .more{
text-align: right; width: 120px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer; cursor: pointer;
background: #F26335;
border-radius: 4px;
span{ span{
color: #F26335; color: #fff;
font-size: 14px; font-size: 14px;
// font-family: PingFangSC-Regular, PingFang SC; // font-family: PingFangSC-Regular, PingFang SC;
} }
img{
margin-left: 10px;
}
} }
} }
</style> </style>
\ No newline at end of file
src/views/Home/comps/list2.vue
...@@ -23,11 +23,11 @@ export default { ...@@ -23,11 +23,11 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.list { .list {
margin: 0; margin: 0;
padding: 7.5px 0; padding: 6px 0;
.row { .row {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 12.5px 0; padding: 9.7px 0;
margin: 0; margin: 0;
cursor: pointer; cursor: pointer;
.li { .li {
......
src/views/Home/comps/yyly-list.vue
...@@ -27,7 +27,7 @@ export default { ...@@ -27,7 +27,7 @@ export default {
.row { .row {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 7.5px 0; padding: 6.1px 0;
margin: 0; margin: 0;
.li { .li {
flex: 1; flex: 1;
......
src/views/Home/index.vue
<template> <template>
<div class="home"> <div class="home">
<!-- Banner图 --> <!-- Banner图 -->
<div id="banner" class="banner carousel slide" data-bs-ride="carousel"> <div class="banner">
<div class="carousel-indicators"> <VueSlickCarousel v-bind="bannerSettings" v-if="banner.length > 0">
<button <div v-for="(el, i) in banner" :key="i">
v-for="(el, i) in banner" <div class="banner-item">
:key="el.id"
type="button"
data-bs-target="#banner"
:data-bs-slide-to="i"
:class="{ active: i === 0 }"
aria-current="true"
:aria-label="`Slide ${i}`"
></button>
</div>
<div class="carousel-inner">
<div
:class="['carousel-item', { active: i === 0 }]"
v-for="(el, i) in banner"
:key="el.id"
>
<div class="carousel-caption">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-lg-8 carousel-caption-left"> <div class="col-lg-8 carousel-caption-left">
...@@ -29,7 +13,10 @@ ...@@ -29,7 +13,10 @@
{{ el.brief }} {{ el.brief }}
</p> </p>
<button class="carousel-btn" @click="learnMore(i)"> <button class="carousel-btn" @click="learnMore(i)">
了解更多 了解更多<img
src="../../assets/image/home/more-arrow.png"
alt=""
/>
</button> </button>
</div> </div>
<div class="col-4 carousel-caption-right d-lg-block"> <div class="col-4 carousel-caption-right d-lg-block">
...@@ -39,17 +26,50 @@ ...@@ -39,17 +26,50 @@
</div> </div>
</div> </div>
</div> </div>
<template #customPaging>
<div class="custom-dot"></div>
</template>
<!-- <template #prevArrow="arrowOption">
<div class="custom-arrow">
<img
src="../../assets/image/home/prev.png"
class="d-block w-100"
alt="..."
/>
</div> </div>
</template> -->
</VueSlickCarousel>
</div> </div>
<!-- 要闻、中心、地方、国际 --> <!-- 要闻、中心、地方、国际 -->
<div class="bgWhite padding40"> <div class="bgWhite padding40">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-lg-8"> <div class="col-lg-8 newsBanner">
<VueSlickCarousel
v-bind="newsBannerSettings"
v-if="newsBanner.length > 0"
>
<div
class="newsBanner-item"
v-for="el in newsBanner"
:key="el.id"
>
<img :src="el.picFile" alt="..." />
<div class="newsBanner-caption">
<div class="newsBanner-title">
{{ el.title }}
</div>
</div>
</div>
<template #customPaging>
<div class="custom-dot"></div>
</template>
</VueSlickCarousel>
<div <div
id="jiaodiantu" id="jiaodiantu"
class="jiaodiantu carousel carousel-dark slide" class="jiaodiantu carousel carousel-dark slide"
data-bs-ride="carousel" data-bs-ride="carousel"
v-if="false"
> >
<div class="carousel-indicators"> <div class="carousel-indicators">
<button <button
...@@ -167,7 +187,7 @@ ...@@ -167,7 +187,7 @@
<div class="ywdt-tp"> <div class="ywdt-tp">
<img :src="tmp.ico" alt="" /> <img :src="tmp.ico" alt="" />
</div> </div>
<div class="ywdt-bt">{{ tmp.name }}1</div> <div class="ywdt-bt">{{ tmp.name }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -373,7 +393,11 @@ ...@@ -373,7 +393,11 @@
<div class="container"> <div class="container">
<div class="spqqsfz-cate"> <div class="spqqsfz-cate">
<div class="spqqsfz-cate-left">商品全球身份证</div> <div class="spqqsfz-cate-left">商品全球身份证</div>
<div class="spqqsfz-cate-right" @click="spqqsfzHandelClick"> <div
class="spqqsfz-cate-right"
@click="spqqsfzHandelClick"
v-if="false"
>
更多> 更多>
</div> </div>
</div> </div>
...@@ -400,7 +424,12 @@ ...@@ -400,7 +424,12 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col offset-2 offset-lg-3"> <div class="col offset-2 offset-lg-3">
<button @click="spqqsfzHandelClick">更多商品信息</button> <button class="spqqsfz-btn" @click="spqqsfzHandelClick">
更多商品信息<img
src="../../assets/image/home/more-arrow.png"
alt=""
/>
</button>
</div> </div>
</div> </div>
</div> </div>
...@@ -412,16 +441,18 @@ ...@@ -412,16 +441,18 @@
<div class="home-bottom"> <div class="home-bottom">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-lg-3"> <div class="col">
<div class="home-bottom-cont">
<div class="djwh"> <div class="djwh">
<div class="home-bottom-cate">党建文化</div> <div class="home-bottom-cate">党建文化</div>
<div class="djwh-tp"> <div class="djwh-tp">
<img src="../../assets/image/home/dangjianwenhua.png" alt="" /> <img
src="../../assets/image/home/dangjianwenhua.png"
alt=""
/>
</div> </div>
<list2 :list="djwh.data" /> <list2 :list="djwh.data" />
</div> </div>
</div>
<div class="col-lg-3">
<div class="ztjj"> <div class="ztjj">
<div class="home-bottom-cate">专题聚焦</div> <div class="home-bottom-cate">专题聚焦</div>
<div class="djwh-tp"> <div class="djwh-tp">
...@@ -429,14 +460,10 @@ ...@@ -429,14 +460,10 @@
</div> </div>
<list2 :list="ztjj.data" /> <list2 :list="ztjj.data" />
</div> </div>
</div>
<div class="col-lg-3">
<div class="yyly"> <div class="yyly">
<div class="home-bottom-cate">应用领域</div> <div class="home-bottom-cate">应用领域</div>
<yylyList :list="yyly.data" /> <yylyList :list="yyly.data" />
</div> </div>
</div>
<div class="col-lg-3">
<div class="other"> <div class="other">
<div class="home-bottom-cate"> <div class="home-bottom-cate">
质检中心/协会/杂志社/标准委/其他 质检中心/协会/杂志社/标准委/其他
...@@ -445,6 +472,7 @@ ...@@ -445,6 +472,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="advert"> <div class="advert">
<div <div
id="advert" id="advert"
...@@ -459,7 +487,12 @@ ...@@ -459,7 +487,12 @@
:key="i" :key="i"
> >
<div class="row"> <div class="row">
<div class="col-lg-4" v-for="(tmpB, ii) in tmpA" :key="ii" @click="handelSmallImagesClick(tmpB)"> <div
class="col-lg-4"
v-for="(tmpB, ii) in tmpA"
:key="ii"
@click="handelSmallImagesClick(tmpB)"
>
<img :src="tmpB.picIndexPath" /> <img :src="tmpB.picIndexPath" />
</div> </div>
</div> </div>
...@@ -524,6 +557,9 @@ ...@@ -524,6 +557,9 @@
</div> </div>
</template> </template>
<script> <script>
import VueSlickCarousel from "vue-slick-carousel";
import "vue-slick-carousel/dist/vue-slick-carousel.css";
import "vue-slick-carousel/dist/vue-slick-carousel-theme.css";
import list from "./comps/list.vue"; import list from "./comps/list.vue";
import list2 from "./comps/list2.vue"; import list2 from "./comps/list2.vue";
import yylyList from "./comps/yyly-list.vue"; import yylyList from "./comps/yyly-list.vue";
...@@ -534,6 +570,7 @@ import message from "../comps/message.vue"; ...@@ -534,6 +570,7 @@ import message from "../comps/message.vue";
export default { export default {
components: { components: {
VueSlickCarousel,
list, list,
list2, list2,
yylyList, yylyList,
...@@ -546,7 +583,23 @@ export default { ...@@ -546,7 +583,23 @@ export default {
return { return {
keywords: "", keywords: "",
banner: [], // 首页大轮播图 banner: [], // 首页大轮播图
bannerSettings: {
arrows: false,
autoplay: true,
dots: true,
centerMode: true,
centerPadding: "0% 0% 0%",
slidesToShow: 1,
slidesToScroll: 1,
},
newsBanner: [], // 要闻左侧图片 newsBanner: [], // 要闻左侧图片
newsBannerSettings: {
arrows: true,
autoplay: false,
dots: true,
slidesToShow: 1,
slidesToScroll: 1,
},
news: [ news: [
{ {
type: "yaowen", type: "yaowen",
...@@ -911,6 +964,7 @@ export default { ...@@ -911,6 +964,7 @@ export default {
el.picIndexPath = `http://www.gs1cn.org/img/demo/${el.picIndexPath}`; el.picIndexPath = `http://www.gs1cn.org/img/demo/${el.picIndexPath}`;
}); });
this.banner = data; this.banner = data;
console.log(this.banner, "this.banner");
} }
console.log(homeBigImagesRes, "首页大轮播图"); console.log(homeBigImagesRes, "首页大轮播图");
}, },
...@@ -1090,6 +1144,82 @@ export default { ...@@ -1090,6 +1144,82 @@ export default {
border-radius: 50%; border-radius: 50%;
} }
} }
.slick-slider,
.slick-list,
.slick-track {
height: 100%;
}
.slick-slide {
> div {
height: 100%;
> div {
height: 100%;
}
}
}
.banner {
.slick-dots {
bottom: 25px !important;
li {
width: 8px;
height: 8px;
&.slick-active {
.custom-dot {
background: #ffffff;
opacity: 1;
}
}
.custom-dot {
border-radius: 50%;
width: 100%;
height: 100%;
background: #fff;
line-height: 1;
padding: 0;
opacity: 0.5;
}
}
}
}
.newsBanner {
.slick-arrow {
z-index: 9;
width: 40px;
&.slick-prev {
left: 0;
&::before {
font-size: 40px;
}
}
&.slick-next {
right: 0;
&::before {
font-size: 40px;
}
}
}
.slick-dots {
width: auto !important;
bottom: 5px !important;
right: 0 !important;
li {
width: 7px;
height: 7px;
&.slick-active {
.custom-dot {
background: #f26335;
}
}
.custom-dot {
width: 100%;
height: 100%;
background: #fff;
line-height: 1;
padding: 0;
}
}
}
}
} }
@media screen and (min-width: 992px) { @media screen and (min-width: 992px) {
.dzfwDialog-width { .dzfwDialog-width {
...@@ -1100,19 +1230,16 @@ export default { ...@@ -1100,19 +1230,16 @@ export default {
.dzfwMessage { .dzfwMessage {
width: auto; width: auto;
} }
.jiaodiantu { .newsBanner {
.carousel-inner {
height: 450px !important; height: 450px !important;
} }
.home-bottom-cont {
> div {
width: 24.4%;
}
} }
} }
@media screen and (max-width: 992px) { @media screen and (max-width: 992px) {
.banner {
.carousel-title {
font-size: 25px !important;
line-height: 30px !important;
}
}
.dzfwDialog-width { .dzfwDialog-width {
width: 140px; width: 140px;
margin: 0 auto; margin: 0 auto;
...@@ -1126,45 +1253,25 @@ export default { ...@@ -1126,45 +1253,25 @@ export default {
background: #e25020 !important; background: #e25020 !important;
} }
} }
.home-bottom-cont {
> div {
width: 100%;
}
}
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
.home { .home {
.banner { .banner {
.carousel-indicators {
[data-bs-target] {
border: 0;
height: 4px;
}
.active {
background: #0e2c6b;
}
}
.carousel-inner {
height: 420px; height: 420px;
.carousel-item { position: relative;
.banner-item {
height: 100%; height: 100%;
background: #f26335; background: #f26335;
} .container,
img {
height: 100%;
}
.carousel-caption {
left: 0;
right: 0;
top: 0;
height: 100%;
text-align: left;
display: flex;
flex-direction: column;
// justify-content: center;
padding: 0;
.container {
height: 100%;
.row { .row {
height: 100%; height: 100%;
} }
}
.carousel-caption-left { .carousel-caption-left {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -1181,12 +1288,18 @@ export default { ...@@ -1181,12 +1288,18 @@ export default {
margin: 30px 0; margin: 30px 0;
} }
.carousel-btn { .carousel-btn {
width: 112px; width: 128px;
height: 37px; height: 37px;
display: flex;
align-items: center;
justify-content: center;
background: #0e2c6b; background: #0e2c6b;
border-radius: 4px; border-radius: 4px;
font-size: 16px; font-size: 16px;
color: #ffffff; color: #ffffff;
img {
margin-left: 10px;
}
} }
} }
.carousel-caption-right { .carousel-caption-right {
...@@ -1198,7 +1311,6 @@ export default { ...@@ -1198,7 +1311,6 @@ export default {
} }
} }
} }
}
.padding18 { .padding18 {
padding: 18px 0; padding: 18px 0;
} }
...@@ -1214,66 +1326,28 @@ export default { ...@@ -1214,66 +1326,28 @@ export default {
.bgWhite { .bgWhite {
background: $bg-color; background: $bg-color;
} }
.jiaodiantu { .newsBanner {
.carousel-indicators { .newsBanner-item {
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 {
// height: 450px;
.carousel-item {
height: 100%; height: 100%;
width: 100%; width: 100%;
position: relative;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.newsBanner-caption {
.carousel-caption { position: absolute;
left: 10px; left: 0;
right: 0;
bottom: 0; bottom: 0;
text-align: left; text-align: left;
padding: 0; padding: 0;
.carousel-title { .newsBanner-title {
font-size: 18px; font-size: 18px;
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
} }
} }
} }
.carousel-indicators {
bottom: 5px;
}
.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%;
}
}
}
.tabs1 { .tabs1 {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -1331,7 +1405,7 @@ export default { ...@@ -1331,7 +1405,7 @@ export default {
} }
.cate { .cate {
color: #0e2c6b; color: #0e2c6b;
font-size: 22px; font-size: 18px;
margin-bottom: 30px; margin-bottom: 30px;
// font-family: PingFangSC-Medium, PingFang SC; // font-family: PingFangSC-Medium, PingFang SC;
} }
...@@ -1492,7 +1566,7 @@ export default { ...@@ -1492,7 +1566,7 @@ export default {
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
color: #ffffff; color: #ffffff;
font-size: 22px; font-size: 18px;
margin-bottom: 30px; margin-bottom: 30px;
// font-family: PingFangSC-Medium, PingFang SC; // font-family: PingFangSC-Medium, PingFang SC;
.spqqsfz-cate-right { .spqqsfz-cate-right {
...@@ -1506,8 +1580,10 @@ export default { ...@@ -1506,8 +1580,10 @@ export default {
position: relative; position: relative;
background: #fff; background: #fff;
border-radius: 6px; border-radius: 6px;
&.row {
margin: 0;
}
> * { > * {
padding: 0;
height: 300px; height: 300px;
} }
.spqqsfz-cont-left { .spqqsfz-cont-left {
...@@ -1520,10 +1596,6 @@ export default { ...@@ -1520,10 +1596,6 @@ export default {
position: relative; position: relative;
background: url("../../assets/image/home/spqqsfz-bj2.png") no-repeat; background: url("../../assets/image/home/spqqsfz-bj2.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
img {
width: 100%;
height: 100%;
}
.right-cont { .right-cont {
position: absolute; position: absolute;
left: 0; left: 0;
...@@ -1555,15 +1627,19 @@ export default { ...@@ -1555,15 +1627,19 @@ export default {
margin-right: 35px; margin-right: 35px;
} }
} }
&:nth-child(3) {
button { .spqqsfz-btn {
width: 156px; width: 172px;
height: 41px; height: 41px;
background: #ffffff; display: flex;
align-items: center;
justify-content: center;
background: #061a4d;
border-radius: 4px; border-radius: 4px;
color: #f26335; color: #fff;
font-size: 18px; font-size: 18px;
cursor: pointer; img {
margin-left: 10px;
} }
} }
} }
...@@ -1572,28 +1648,31 @@ export default { ...@@ -1572,28 +1648,31 @@ export default {
} }
} }
.home-bottom { .home-bottom {
padding: 40px 0; // padding: 40px 0;
.row {
> * {
div {
background: #fff;
}
}
}
.home-bottom-cate { .home-bottom-cate {
color: #0e2c6b; color: #0e2c6b;
font-size: 22px; font-size: 18px;
padding: 15px 0 15px 20px; padding: 15px 0 15px 20px;
// font-family: PingFangSC-Medium, PingFang SC; // font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
} }
.home-bottom-cont {
margin: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
>div{
background: #fff;
margin-top: 40px;
}
}
.djwh-tp { .djwh-tp {
img { img {
width: 100%; width: 100%;
} }
} }
.advert { .advert {
margin-top: 40px; margin: 40px 0;
.carousel-item { .carousel-item {
img { img {
width: 100%; width: 100%;
......
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