From 40dd36a940f53dc57115483d069dd27d87b8cb1f Mon Sep 17 00:00:00 2001 From: 明梦爽 <2972214568@qq.com> Date: 星期四, 03 三月 2022 15:22:53 +0800 Subject: [PATCH] 功能完善 --- src/components/page/index.vue | 119 +++++++++++++++++++++++++++++++---------------------------- 1 files changed, 62 insertions(+), 57 deletions(-) diff --git a/src/components/page/index.vue b/src/components/page/index.vue index e326b25..789723f 100644 --- a/src/components/page/index.vue +++ b/src/components/page/index.vue @@ -2,21 +2,15 @@ <div calss="box"> <!-- 棣栭〉涓婂崐閮ㄥ垎 --> <el-row type="flex" class="row-bg" justify="space-between"> - <el-aside width="600px"> - <div class="block"> - <el-carousel height="350px" type="card"> - <el-carousel-item v-for="item in 4" :key="item"> - <h3 class="small"></h3> - <div> - <img src="../../assets/boer.jpg" alt=""> - <img src="../../assets/boer2.jpg" alt=""> - <img src="../../assets/boer.jpg" alt=""> - <img src="../../assets/boer2.jpg" alt=""> + <div class="block marr10"> + <el-carousel height="450px" arrow="always" :interval="3000"> + <el-carousel-item v-for="(item,index) in imgList" :key="index"> + <div @click="gonew(item.id)" class="cursor" style="width:590px; height:450px"> + <img :src="'http://localhost:7070/'+item.picturePath" alt="" style="width:100%; height:90%"> </div> </el-carousel-item> </el-carousel> </div> - </el-aside> <notice class="notice" /> </el-row> <!-- 棣栭〉涓嬪崐閮ㄥ垎 --> @@ -25,6 +19,14 @@ <school class="school"/> <other class="other"/> </el-row> + + <!-- 瀹氫綅fixed --> + <div class="fixed1"> + <a href="#"><img src="../../assets/gzh.jpg" alt=""></a> + </div> + <div class="fixed2"> + <a href="#"><img src="../../assets/wb.jpg" alt=""></a> + </div> </div> </template> <script> @@ -33,62 +35,55 @@ import school from '../../views/school.vue' import other from '../../views/other.vue' +import {getNewsList} from '../../api/api' + export default { components: { notice, work, school, other }, - name: 'index' + name: 'index', + data(){ + return{ + // imgList:[ + // { path:require('../../assets/1.jpg'),index: 1}, + // { path:require('../../assets/2.jpg'),index: 2}, + // { path:require('../../assets/3.jpg'),index: 3}, + // ], + imgList:[], + } + }, + created(){ + this.getnews() + }, + methods:{ + getnews(){ + const data ={ + current:1, + newsCategoryId:45, + size:3 + } + getNewsList(data).then(res => { + console.log(res); + if(res.code == 200){ + this.imgList = res.data.records + } + }).catch(err => { + console.log(err); + }) + }, + gonew(id){ + this.$router.push({path:'/home/news',query:{id:id}}) + } + } } </script> <style lang="less" scoped> -.el-header { - background-color: rgb(131, 51, 51); - height: 400px !important; - padding: 0; - .el-main { - background-color: rgb(25, 202, 193); - height: 400px; - } -} -.xiaBian { - background: rgb(132, 199, 44); - height: 400px; - padding: 0; - .el-main { - background-color: rgb(70, 27, 187); - height: 400px; - } -} -.youXiaJiao { - padding: 0; - // height: 400px; - .el-header { - height: 200px !important; - } - .el-main { - height: 200px; - background-color: rgb(206, 44, 171); - } -} - -.el-carousel__item h3 { - color: #475669; - font-size: 14px; - opacity: 0.75; - line-height: 150px; - margin: 0; -} - -.el-carousel__item:nth-child(2n) { - background-color: #99a9bf; -} - -.el-carousel__item:nth-child(2n + 1) { - background-color: #d3dce6; +.block { + width: 50%; } .block div { img { width: 100%; height: 100%; - object-fit:cover; + // object-fit:cover; } } .notice{ @@ -105,4 +100,14 @@ width: 20%; margin-left: 5px; } +.fixed1 { + position: fixed; + top:270px; + right: 2px; +} +.fixed2 { + position: fixed; + top:340px; + right: 2px; +} </style> \ No newline at end of file -- Gitblit v1.8.0