chutingting 1 рік тому
джерело
коміт
0e2ab39068
2 змінених файлів з 105 додано та 58 видалено
  1. +31
    -27
      src/views/information/index.vue
  2. +74
    -31
      src/views/metadaily/index.vue

+ 31
- 27
src/views/information/index.vue Переглянути файл

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


+ 74
- 31
src/views/metadaily/index.vue Переглянути файл

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

Завантаження…
Відмінити
Зберегти