我叫MT 1 anno fa
parent
commit
1f19321d15
3 ha cambiato i file con 105 aggiunte e 59 eliminazioni
  1. +0
    -1
      src/views/home/index.vue
  2. +31
    -27
      src/views/information/index.vue
  3. +74
    -31
      src/views/metadaily/index.vue

+ 0
- 1
src/views/home/index.vue Vedi File

@@ -261,7 +261,6 @@ export default {
.lr { .lr {
width: 50%; width: 50%;
height: 100%; height: 100%;
position: relative;
video { video {
width: 100%; width: 100%;
height: 100%; height: 100%;


+ 31
- 27
src/views/information/index.vue Vedi File

@@ -166,8 +166,9 @@ export default {
for (const iter of data.list) { for (const iter of data.list) {
this.carouselList.push({ this.carouselList.push({
src: iter.image, src: iter.image,
title: iter.link,
subtitle: iter.link
title: iter.title,
subtitle: iter.subtitle,
link: iter.link
}) })
} }
} }
@@ -259,6 +260,7 @@ export default {
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
padding-bottom: 30px;
.content { .content {
width: 1200px; width: 1200px;
height: 90%; height: 90%;
@@ -270,18 +272,16 @@ export default {
} }
.top { .top {
min-height: 470px; min-height: 470px;
margin-bottom: 40px;
background-color: #FFFFFF; background-color: #FFFFFF;
display: flex; display: flex;
#imgtxt { #imgtxt {
width: 55%;
width: 560px;
position: relative; position: relative;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
img { img {
width: 90%; width: 90%;
height: 90%;
} }
.newsTitle{ .newsTitle{
position: absolute; position: absolute;
@@ -337,7 +337,7 @@ export default {
} }
} }
#hotList { #hotList {
height: 90%;
height: 76%;
width: 90%; width: 90%;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@@ -348,15 +348,22 @@ export default {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 45%;
width: 150px;
margin-right: 39px;
img { img {
width: 140px;
height: 110px;
width: 150px;
height: 112px;
border-radius: 10px;
} }
a { a {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
color: #010101; color: #010101;
margin-top: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 150px;
// line-height: 48px; // line-height: 48px;
} }
} }
@@ -374,8 +381,7 @@ export default {
.content { .content {
margin-top: 20px; margin-top: 20px;
.top { .top {
min-height: 470px;
margin-bottom: 40px;
margin-bottom: 30px;
background-color: #FFFFFF; background-color: #FFFFFF;
display: flex; display: flex;
background-image: url('../../assets/hotTopLeft.png'); background-image: url('../../assets/hotTopLeft.png');
@@ -383,14 +389,13 @@ export default {
background-size: 30% 50%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */ background-size: 30% 50%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */
background-repeat: no-repeat; background-repeat: no-repeat;
#imgtxt { #imgtxt {
width: 55%;
width: 560px;
position: relative; position: relative;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
img { img {
width: 90%; width: 90%;
height: 90%;
} }
.newsTitle{ .newsTitle{
position: absolute; position: absolute;
@@ -410,7 +415,7 @@ export default {
} }
#daliay { #daliay {
height: 700px;
height: 625px;
.top { .top {
// justify-content: space-between; // justify-content: space-between;
background-color: #00000000 !important; background-color: #00000000 !important;
@@ -449,7 +454,6 @@ export default {
} }
#wk { #wk {
height: 700px;
.content { .content {
background-color: #FFFFFF; background-color: #FFFFFF;
display: flex; display: flex;
@@ -461,6 +465,7 @@ export default {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
width: 93%; width: 93%;
margin-bottom: 20px;
.tle { .tle {
z-index: 9; z-index: 9;
font-size: 26px; font-size: 26px;
@@ -489,24 +494,19 @@ export default {
} }
} }
#hotList { #hotList {
height: 90%;
width: 95%;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between;
align-items: center; align-items: center;
.list { .list {
display: flex; display: flex;
width: 50%;
align-items: center;
justify-content: center; justify-content: center;
width: 500px;
margin: 0 40px 34px 33px;
.txt { .txt {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-left: 10px;
margin-left: 22px;
align-items: center; align-items: center;
justify-content: space-between;
width: 60%; width: 60%;
.title { .title {
text-align: left; text-align: left;
@@ -514,10 +514,8 @@ export default {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
color: #010101; color: #010101;
line-height: 48px;
} }
.subtitle{ .subtitle{
height: 90%;
display: inline-block; display: inline-block;
text-align: left; text-align: left;
width: 100%; width: 100%;
@@ -525,11 +523,17 @@ export default {
font-weight: 400; font-weight: 400;
color: #000000; color: #000000;
line-height: 24px; line-height: 24px;
margin-top: 10px;
display: -webkit-box; /* Safari */
-webkit-line-clamp: 3; /* Safari and Chrome */
-webkit-box-orient: vertical; /* Safari and Chrome */
overflow: hidden;
} }
} }
img { img {
width: 160px;
height: 110px;
width: 200px;
height: 150px;
border-radius: 10px;
} }
} }
} }


+ 74
- 31
src/views/metadaily/index.vue Vedi File

@@ -1,5 +1,5 @@
<template> <template>
<div>
<div class="metadaily">
<el-carousel > <el-carousel >
<el-carousel-item class="lunbo" v-for="(item, index) in carouselList" :key="index" :style="{ backgroundImage: `url(${item.src})` }"> <el-carousel-item class="lunbo" v-for="(item, index) in carouselList" :key="index" :style="{ backgroundImage: `url(${item.src})` }">
<div id="txt"> <div id="txt">
@@ -28,9 +28,11 @@
</div> </div>
</div> </div>
</div> </div>
<div class="bottom" :style="{ backgroundImage: `url(${gg1})` }"/>
</div> </div>
</div> </div>
<div class="gg">
<img :src="gg1" alt="">
</div>
<div id="daliay"> <div id="daliay">
<div class="content"> <div class="content">
<div class="top"> <div class="top">
@@ -52,9 +54,11 @@
</div> </div>
</div> </div>
</div> </div>
<div class="bottom" :style="{ backgroundImage: `url(${gg2})` }"/>
</div> </div>
</div> </div>
<div class="gg">
<img :src="gg2" alt="">
</div>
<div id="wk"> <div id="wk">
<div class="content"> <div class="content">
<div class="htitle"> <div class="htitle">
@@ -180,8 +184,9 @@ export default {
for (const iter of data.list) { for (const iter of data.list) {
this.carouselList.push({ this.carouselList.push({
src: iter.image, src: iter.image,
title: iter.link,
subtitle: iter.link
title: iter.title,
subtitle: iter.subtitle,
link: iter.link
}) })
} }
} }
@@ -214,6 +219,9 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.metadaily{
background: #E3E5EA;
}
.el-carousel__item{ .el-carousel__item{
background-size: 100%; background-size: 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
@@ -244,14 +252,15 @@ export default {
background-size: auto; background-size: auto;
background-position: center; background-position: center;
} }
#hot, #daliay, #wk {
#hot, #wk {
width: 100%; width: 100%;
background: #E3E5EA; background: #E3E5EA;
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
padding-top: 30px;;
//padding-top: 30px;;
padding-bottom: 30px;
.content { .content {
width: 1200px; width: 1200px;
height: 90%; height: 90%;
@@ -262,18 +271,20 @@ export default {
width: 100%; width: 100%;
} }
.top { .top {
margin-bottom: 30px;
min-height: 470px;
//margin-bottom: 30px;
background-color: #FFFFFF; background-color: #FFFFFF;
display: flex; display: flex;
#imgtxt { #imgtxt {
width: 55%;
width: 560px;
//width: 55%;
position: relative; position: relative;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
img { img {
width: 90%; width: 90%;
height: 90%;
//height: 90%;
} }
.newsTitle{ .newsTitle{
position: absolute; position: absolute;
@@ -329,7 +340,8 @@ export default {
} }
} }
#hotList { #hotList {
height: 90%;
//height: 90%;
height: 76%;
width: 90%; width: 90%;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@@ -338,17 +350,23 @@ export default {
.list { .list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center;
justify-content: center; justify-content: center;
margin-right: 39px;
img { img {
width: 140px;
height: 110px;
width: 150px;
height: 112px;
border-radius: 10px;
} }
a { a {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
color: #010101; color: #010101;
line-height: 48px;
margin-top: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 150px;
//line-height: 48px;
} }
} }
} }
@@ -361,9 +379,12 @@ export default {
} }
} }
#hot { #hot {
padding: 0;
.content { .content {
margin-top: 30px;
.top { .top {
margin-bottom: 30px;
//min-height: 470px;
//margin-bottom: 40px;
background-color: #FFFFFF; background-color: #FFFFFF;
display: flex; display: flex;
background-image: url('../../assets/hotTopLeft.png'); background-image: url('../../assets/hotTopLeft.png');
@@ -371,14 +392,14 @@ export default {
background-size: 30% 50%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */ background-size: 30% 50%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */
background-repeat: no-repeat; background-repeat: no-repeat;
#imgtxt { #imgtxt {
width: 55%;
width: 560px;
position: relative; position: relative;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
img { img {
width: 90%; width: 90%;
height: 90%;
//height: 90%;
} }
.newsTitle{ .newsTitle{
position: absolute; position: absolute;
@@ -402,6 +423,11 @@ export default {
} }
} }
#wk, #daliay { #wk, #daliay {
.content {
width: 1200px;
margin: 0 auto;
background: #fff;
}
.content, .top { .content, .top {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -413,6 +439,7 @@ export default {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
width: 93%; width: 93%;
margin-bottom: 20px;
.item { .item {
width: 15%; width: 15%;
display: flex; display: flex;
@@ -456,27 +483,28 @@ export default {
} }
} }
#hotList { #hotList {
height: 90%;
width: 95%;
//height: 90%;
//width: 95%;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between;
//justify-content: space-between;
align-items: center; align-items: center;
.list { .list {
display: flex; display: flex;
width: 50%;
height: 50%;
//width: 50%;
flex-direction: row !important; flex-direction: row !important;
align-items: center;
//align-items: center;
justify-content: center; justify-content: center;
margin-bottom: 30px;
//margin-bottom: 30px;
width: 500px !important;
margin: 0 40px 34px 33px;
.txt { .txt {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-left: 10px;
margin-left: 22px;
align-items: center; align-items: center;
justify-content: space-between;
//justify-content: space-between;
width: 60%; width: 60%;
.title { .title {
text-align: left; text-align: left;
@@ -484,10 +512,10 @@ export default {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
color: #010101; color: #010101;
line-height: 48px;
//line-height: 48px;
} }
.subtitle{ .subtitle{
height: 90%;
//height: 90%;
display: inline-block; display: inline-block;
text-align: left; text-align: left;
width: 100%; width: 100%;
@@ -495,11 +523,17 @@ export default {
font-weight: 400; font-weight: 400;
color: #000000; color: #000000;
line-height: 24px; line-height: 24px;
margin-top: 10px;
display: -webkit-box; /* Safari */
-webkit-line-clamp: 3; /* Safari and Chrome */
-webkit-box-orient: vertical; /* Safari and Chrome */
overflow: hidden;
} }
} }
img { img {
width: 200px !important;
height: 150px !important;
width: 200px ;
height: 150px;
border-radius: 10px;
} }
} }
} }
@@ -515,4 +549,13 @@ export default {
background-repeat: no-repeat; background-repeat: no-repeat;
} }
} }
.gg {
margin: 30px auto;
width: 1200px;
img {
width: 100%;
}
}
</style> </style>

Caricamento…
Annulla
Salva