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 | 133 ++++++++++++++++++++++---------------------- 1 files changed, 67 insertions(+), 66 deletions(-) diff --git a/src/components/page/index.vue b/src/components/page/index.vue index 5ce083b..6f660e4 100644 --- a/src/components/page/index.vue +++ b/src/components/page/index.vue @@ -2,23 +2,31 @@ <div calss="box"> <!-- 棣栭〉涓婂崐閮ㄥ垎 --> <el-row type="flex" class="row-bg" justify="space-between"> - <div class="block marr10"> - <el-carousel height="460px" arrow="always"> - <el-carousel-item v-for="(item,index) in imgList" :key="index"> - <div> - <img :src="item.path" alt="" style="width:105%;"> - </div> - </el-carousel-item> - </el-carousel> - </div> + <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> @@ -27,66 +35,49 @@ 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', - data(){ - return{ - imgList:[ - { path:require('../../assets/boer.jpg'),index: 1}, - { path:require('../../assets/boer2.jpg'),index: 2}, - { path:require('../../assets/boer.jpg'),index: 3}, - ] + 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{ - 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%; } @@ -97,7 +88,7 @@ // object-fit:cover; } } -.notice{ +.notice { width: 50%; } .work { @@ -111,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