From 3f747107835f019270a688a15aad4fd843cb8853 Mon Sep 17 00:00:00 2001 From: 明梦爽 <2972214568@qq.com> Date: 星期五, 19 十一月 2021 16:53:47 +0800 Subject: [PATCH] SSH --- src/components/page/index.vue | 91 +++++++++++++++++---------------------------- 1 files changed, 35 insertions(+), 56 deletions(-) diff --git a/src/components/page/index.vue b/src/components/page/index.vue index e326b25..44e986d 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 class="block marr10"> + <el-carousel height="460px" arrow="always" :interval="2000"> + <el-carousel-item v-for="(item,index) in imgList" :key="index"> <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=""> + <img :src="item.path" alt="" style="width:105%;"> </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> @@ -35,60 +37,27 @@ 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}, + ] + } + } } </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 +74,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