Skip to content

G
gs1
Commit eb7c20ff by 林家欣
Options

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

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