From ece9b6bba5a44a06041a8ad4d5f5ac1f14560d3e Mon Sep 17 00:00:00 2001 From: 明梦爽 <2972214568@qq.com> Date: 星期二, 09 八月 2022 09:42:12 +0800 Subject: [PATCH] 完善Readme --- src/components/page/index.vue | 139 ++++++++++++++++++++++++---------------------- 1 files changed, 73 insertions(+), 66 deletions(-) diff --git a/src/components/page/index.vue b/src/components/page/index.vue index e326b25..6f660e4 100644 --- a/src/components/page/index.vue +++ b/src/components/page/index.vue @@ -2,29 +2,31 @@ <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> - </el-carousel-item> - </el-carousel> - </div> - </el-aside> + <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> <notice class="notice" /> </el-row> <!-- 棣栭〉涓嬪崐閮ㄥ垎 --> <el-row type="flex" class="row-bg" justify="space-between"> - <work class="work"/> - <school class="school"/> - <other class="other"/> + <work class="work" /> + <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,65 +35,60 @@ 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{ +.notice { width: 50%; } .work { @@ -105,4 +102,14 @@ width: 20%; margin-left: 5px; } -</style> \ No newline at end of file +.fixed1 { + position: fixed; + top: 270px; + right: 2px; +} +.fixed2 { + position: fixed; + top: 340px; + right: 2px; +} +</style> -- Gitblit v1.8.0