This commit is contained in:
XinWei 2024-08-15 09:43:42 +08:00
commit 829259d0f6
2 changed files with 971 additions and 917 deletions

View File

@ -64,7 +64,8 @@
<div style="color:rgba(60,115,164);font-size:40px">{{componyarr[0].sketchIn}} <div style="color:rgba(60,115,164);font-size:40px">{{componyarr[0].sketchIn}}
</div> </div>
<div style="height: 40px;"></div> <div style="height: 40px;"></div>
<div style="color: rgba(0,0,0,.6);line-height: 30px;width: 57%;" class="init" v-html="componyarr[0].contentIn"> <div style="color: rgba(0,0,0,.6);line-height: 30px;width: 57%;" class="init"
v-html="componyarr[0].contentIn">
</div> </div>
<div style="height: 40px;"></div> <div style="height: 40px;"></div>
@ -75,7 +76,8 @@
<div style="color:rgba(60,115,164);font-size:40px">{{componyarr[0].sketchDown}} <div style="color:rgba(60,115,164);font-size:40px">{{componyarr[0].sketchDown}}
</div> </div>
<div style="height: 40px;"></div> <div style="height: 40px;"></div>
<div style="color: rgba(0,0,0,.6);line-height: 30px;width: 57%;" class="init" v-html="componyarr[0].contentDown"> <div style="color: rgba(0,0,0,.6);line-height: 30px;width: 57%;" class="init"
v-html="componyarr[0].contentDown">
</div> </div>
<div style="height: 70px;"></div> <div style="height: 70px;"></div>
@ -147,24 +149,25 @@
</ul> </ul>
</div> </div>
</div> </div>
<div style="width: 80%;margin: auto;flex-wrap: wrap;justify-content: space-between; display: grid; <div class="images_cl">
grid-template-columns: repeat(auto-fill, minmax(31.33%, 1fr)); <div style="width: auto;margin-bottom: 20px;border-radius: 10px;cursor: pointer;"
grid-column-gap: 2%;"> v-for="item in honorList" :key="item.id" @click="changeto(item.id)">
<div style="width: auto;margin-bottom: 20px;border-radius: 10px;cursor: pointer;" v-for="item in honorList" :key="item.id" @click="changeto(item.id)">
<div style="background-color: rgb(240,246,250); border-radius: 14px 14px 0 0;"> <div style="background-color: rgb(240,246,250); border-radius: 14px 14px 0 0;">
</div> </div>
<div style="height: 100%;text-align: center; border: 5px solid #F8F8F8;"> <div class="img_cl" style="height: 100%;text-align: center; border: 5px solid #F8F8F8;">
<img :src="item.picture" alt="200603" style="scale: 0.85;height: 285px;width: 379px"> </div> <img :src="item.picture" alt="200603" style="scale: 0.85;height: 285px;width: 379px">
</div>
</div> </div>
</div> </div>
<div v-if="!honorList.length" style="height: 400px;display: flex;justify-content: center;align-items: center;"> <div v-if="!honorList.length"
style="height: 400px;display: flex;justify-content: center;align-items: center;">
<div style="color: #999;">该年份暂无内容展示</div> <div style="color: #999;">该年份暂无内容展示</div>
</div> </div>
</div> </div>
@ -225,16 +228,20 @@
</div> </div>
</template> </template>
<script> <script>
import { honor,culture,compony } from '@/api'; import {
import { honorList } from '@/api'; honor,
culture,
compony
} from '@/api';
import {
honorList
} from '@/api';
export default { export default {
data() { data() {
return { return {
activeName: 'first', activeName: 'first',
timeIndex: 0, timeIndex: 0,
timeLineList: timeLineList: [{
[
{
"timestamp": "全部", "timestamp": "全部",
"color": "#999", "color": "#999",
"fontsize": 18, "fontsize": 18,
@ -335,7 +342,11 @@ export default {
async getHonner(year) { async getHonner(year) {
const {data:res} = await honorList({'year':year}); const {
data: res
} = await honorList({
'year': year
});
console.log(res) console.log(res)
this.honorList = res this.honorList = res
}, },
@ -355,8 +366,7 @@ export default {
// this.$refs.mytimeline.style.marginLeft = marginLeft - 220 + 'px'; // this.$refs.mytimeline.style.marginLeft = marginLeft - 220 + 'px';
if (this.timeIndex < 1) { if (this.timeIndex < 1) {
return return
} } else {
else {
this.timeIndex = this.timeIndex - 1 this.timeIndex = this.timeIndex - 1
console.log(this.timeIndex) console.log(this.timeIndex)
const year = this.timeLineList[this.timeIndex].year const year = this.timeLineList[this.timeIndex].year
@ -387,7 +397,30 @@ export default {
} }
}; };
</script> </script>
<style scoped> <style scoped lang="scss">
.images_cl {
width: 80%;
margin: auto;
flex-wrap: wrap;
justify-content: space-between;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(31.33%, 1fr));
}
@media screen and (max-width:1523px) {
.img_cl {
img {
width: 100% !important;
}
}
}
@media screen and (max-width:1241px) {
.images_cl {
grid-template-columns: repeat(auto-fill, minmax(45%, 1fr));
}
}
.compbg { .compbg {
background-image: url('../assets/images/banner.png'); background-image: url('../assets/images/banner.png');
} }
@ -702,10 +735,11 @@ li {
margin-left: -22px; */ margin-left: -22px; */
flex: 0.5 flex: 0.5
} }
.init p { .init p {
margin: 16px 0 margin: 16px 0
} }
.ul_box { .ul_box {
width: 100%; width: 100%;

View File

@ -53,7 +53,9 @@
</div> </div>
</template> </template>
<script> <script>
import { projectdetail } from '@/api'; import {
projectdetail
} from '@/api';
export default { export default {
data() { data() {
return { return {
@ -86,21 +88,25 @@ export default{
position: static; position: static;
margin-bottom: 28px; margin-bottom: 28px;
} }
.name { .name {
font-size: 30px; font-size: 30px;
color: #0007a9; color: #0007a9;
color: rgba(0, 7, 169, .8); color: rgba(0, 7, 169, .8);
line-height: 36px; line-height: 36px;
} }
.news_d { .news_d {
padding: 60px 0 90px; padding: 60px 0 0px;
overflow: hidden; overflow: hidden;
} }
.Wrapper { .Wrapper {
position: relative; position: relative;
background-color: #fff; background-color: #fff;
z-index: 100; z-index: 100;
} }
/* .news_d .name { /* .news_d .name {
font-size: 30px; font-size: 30px;
color: #0007a9; color: #0007a9;
@ -117,6 +123,7 @@ border: none;
::v-deep .el-tabs__nav-wrap::after { ::v-deep .el-tabs__nav-wrap::after {
background-color: transparent; background-color: transparent;
} }
.news_d .con p { .news_d .con p {
font-size: 14.5px; font-size: 14.5px;
color: #8e8e95; color: #8e8e95;
@ -147,9 +154,11 @@ background-color: transparent;
top: 0; top: 0;
z-index: -1; z-index: -1;
} }
.top-box { .top-box {
margin: 16px 0 30px; margin: 16px 0 30px;
} }
.date { .date {
font-size: 26px; font-size: 26px;
@ -160,10 +169,12 @@ background-color: transparent;
padding: 0 30px; padding: 0 30px;
width: 100%; width: 100%;
} }
.page_ban .content { .page_ban .content {
position: relative; position: relative;
height: 100%; height: 100%;
} }
.content { .content {
width: 86%; width: 86%;
margin: 0 auto; margin: 0 auto;
@ -175,6 +186,7 @@ background-color: transparent;
left: 0; left: 0;
bottom: 0; bottom: 0;
} }
div, div,
li { li {
box-sizing: border-box; box-sizing: border-box;
@ -227,48 +239,56 @@ li {
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
font-weight: bold; font-weight: bold;
} }
.z_xq_cont_top_lt { .z_xq_cont_top_lt {
font-size: 25px; font-size: 25px;
color: #000000; color: #000000;
margin-top: 55px; margin-top: 55px;
font-weight: bold; font-weight: bold;
} }
.z_xq_cont_top_ls { .z_xq_cont_top_ls {
font-size: 20px; font-size: 20px;
color: #263d8f; color: #263d8f;
margin: 20px 0; margin: 20px 0;
} }
.z_xq_cont_top_lc { .z_xq_cont_top_lc {
overflow: hidden; overflow: hidden;
} }
.z_xq_cont_top_lc img { .z_xq_cont_top_lc img {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
vertical-align: middle; vertical-align: middle;
border: 0; border: 0;
} }
.z_xq_cont_top_lx { .z_xq_cont_top_lx {
height: 88px; height: 88px;
border-left: 1px solid #CCCCCC; border-left: 1px solid #CCCCCC;
padding-left: 10px; padding-left: 10px;
margin-top: 50px; margin-top: 50px;
} }
.z_xq_cont_top_lx .jzmssj { .z_xq_cont_top_lx .jzmssj {
font-size: 46px; font-size: 46px;
color: #263d8f; color: #263d8f;
font-weight: 100; font-weight: 100;
line-height: 52px; line-height: 52px;
} }
.z_xq_cont_top_lx .jzmssj .dwi { .z_xq_cont_top_lx .jzmssj .dwi {
font-size: 14px; font-size: 14px;
color: #666666; color: #666666;
} }
.cont { .cont {
width: 70%; display: flex;
margin: 0 auto; width: 100%;
}
.cont >>> img{
max-width:500px;
} }
.cont>>>img {
width: 100%;
}
</style> </style>