qq_37813237 2022-08-16 22:14 采纳率: 100%
浏览 156
已结题

flex布局问题、elementui使用问题、swiper图片问题

用的flex布局,引入vue和element
问题1:想固定上下导航栏,中间的滚动部分使用了网上找的轮播图高度自适应,百度了几种办法都没有用。
问题2:这个轮播图第一次加载的时候第一张图片不显示,滑动了以后才显示 。
问题2:顶部导航栏(head)想实现一个元素居左一个元素居中,但在head的子元素中使用justify-content并没有生效。

img


问题3:引用elementui,有一部分生效,有一部分无效如按钮。

img


问题4:有知道elementui的这个穿梭框红色部分怎么放到第一个穿梭框的下面吗?

img

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.9/lib/index.css" />
    <!-- <meta name="viewport" content="width=device-width,user-scalable=no"/> -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
    <link href="using.css/index.css" rel = "stylesheet" type="text/css">
    <link href="using.css/lunbo.css" rel = "stylesheet">
    <link rel="stylesheet" href="./using.css/swiper.min.css">
    <link rel="stylesheet" href="./using.css/swiper-bundle.min.css">
    <link rel="stylesheet" href="./using.css/elment.index.css">
    <script src="./js/vant.min.js"></script>
    <script src="./js/vant.js"></script>
    <script src="./js/vue.js"></script>
    <script src="./js/vue.min.js"></script>
    <script src="./js/elment.index.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src = "./js/index.js"></script>
    <script src = "./js/jquery.js"></script>
    <script src="./js/swiper-bundle.min.js"></script>
    <script src = "./js/swiper.min.js"></script>
    <script src="./js/TweenMax.min.js"></script>
    <title>JayZhou</title>
</head>
<body>
    <div id = "app">
        <div class="home">
            <div class = "head">
                <div class = "return">
                    <svg t="1660649618959" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7384" ><path d="M872 474H286.9l350.2-304c5.6-4.9 2.2-14-5.2-14h-88.5c-3.9 0-7.6 1.4-10.5 3.9L155 487.8c-14.7 12.8-14.7 35.6 0 48.3L535.1 866c1.5 1.3 3.3 2 5.2 2h91.5c7.4 0 10.8-9.2 5.2-14L286.9 550H872c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z" p-id="7385"></path></svg>
                </div>
                <div class = "zhisi">
                <h1 >JayZhou</h1>
                </div>
            </div>
            <div class="roll">
                <template v-if="layout=='home'">
                    <div class = "banner">
                        <div class="swiper" id="gallery">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide" data-poster= "https://img10.360buyimg.com/n1/jfs/t1/182705/23/14215/159141/60efd615Eb18884b0/1ca9db4c1aacf75a.jpg"></div>
                                <div class="swiper-slide" data-poster= "https://img10.360buyimg.com/n1/jfs/t1/188299/40/13285/187329/60efd615Eff32a880/28263ef08b837337.jpg"></div>
                                <div class="swiper-slide" data-poster= "https://img13.360buyimg.com/n1/jfs/t1/96838/40/26167/122971/625f8c9bE065dd66c/5a743497098268ce.jpg"></div>
                            </div>
                            <div class="swiper-pagination"></div>
                            <canvas id="shows" style="position: absolute; left: 0px; top: 0px;"></canvas>
                        </div>
                    </div>
                    <div class = "modules">
                        <div class = "item" v-on:click="layout = 'quality'">                
                            <div class = "item-img">
                                <img src="./image/主页.jpg">
                            </div>
                            <p style="color:green">GREEN</p>
                        </div>
                        <div class = "item">
                            <a href="">
                                <div class = "item-img"></div>
                                <p>标签2</p>
                            </a>
                        </div>
                        <div class = "item">
                            <a href="">
                                <div class = "item-img"></div>
                                <p>标签3</p>
                            </a>
                        </div>
                </div>
                </template>
                <div id="Qc">
                    <template v-if="layout=='quality'">
                        <el-badge :value="12" class="item">
                            <el-button size="small">评论</el-button>
                          </el-badge>
                          <el-badge :value="3" class="item">
                            <el-button size="small">回复</el-button>
                          </el-badge>
                          <el-badge :value="1" class="item" type="primary">
                            <el-button size="small">评论</el-button>
                          </el-badge>
                          <el-badge :value="2" class="item" type="warning">
                            <el-button size="small">回复</el-button>
                          </el-badge>
                          
                          <el-dropdown trigger="click">
                            <span class="el-dropdown-link">
                              点我查看<i class="el-icon-caret-bottom el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                              <el-dropdown-item class="clearfix">
                                评论
                                <el-badge class="mark" :value="12" />
                              </el-dropdown-item>
                              <el-dropdown-item class="clearfix">
                                回复
                                <el-badge class="mark" :value="3" />
                              </el-dropdown-item>
                            </el-dropdown-menu>
                          </el-dropdown>
                    </template>
                </div>
                <div id="Tc">
                <template v-if="layout=='taskCre'">
                    <div class = "Fc">
                        <el-form ref="form"  label-width="80px">
                            <el-form-item label="活动名称">
                              <el-input></el-input>
                            </el-form-item>
                            <el-form-item label="任务模块">
                              <el-select  placeholder="请选择任务所属模块">
                                <el-option label="1" value="shanghai"></el-option>
                                <el-option label="2" value="beijing"></el-option>
                              </el-select>
                            </el-form-item>
                            <el-form-item label="任务期限">
                                <template>
                                    <div class="block">
                                      <el-date-picker
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期">
                                      </el-date-picker>
                                    </div>
                                </template>
                            </el-form-item>
                            <div class="edit_dev">
                            <template>
                                <div style="text-align: center">
                                  <el-transfer
                                    style="text-align: left; display: inline-block"
                                    filterable
                                    :left-default-checked="[2, 3]"
                                    :right-default-checked="[1]"
                                    :titles="['人员列表', '选择人员']">
                                    <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>
                                    <el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>
                                    <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button>
                                  </el-transfer>
                                </div>
                            </template>
                            </div>
                              <el-checkbox-group>
                                <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                                <el-checkbox label="地推活动" name="type"></el-checkbox>
                                <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                                <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
                              </el-checkbox-group>
                            </el-form-item>
                            <el-form-item label="特殊资源">
                              <el-radio-group>
                                <el-radio label="线上品牌商赞助"></el-radio>
                                <el-radio label="线下场地免费"></el-radio>
                              </el-radio-group>
                            </el-form-item>
                            <el-form-item label="活动形式">
                              <el-input type="textarea"></el-input>
                            </el-form-item>
                            <el-form-item>
                              <el-button type="primary">立即创建</el-button>
                              <el-button>取消</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </template>
                </div>
                <div id = "tack">
                    <template v-if="layout=='task'">
                        <van-dropdown-menu>
                            <van-dropdown-item v-model="taskStat" :options="taskoption">
                            </van-dropdown-item>
                        </van-dropdown-menu>
                    </template>
                </div>
            </div>
            <div class = "foot">
                <div class = "footbotten" v-on:click="reHome">
                    <img src="./image/主页.jpg">
                </div>
                <div class = "footbotten" v-on:click="layout = 'taskCre'">
                    <img src="./image/任务.jpg">
                </div>
            </div>
        </div>
    </div>
    <script>
            var homepage = new Vue({
                el:'#app',
                value:0,
                data:{
                    taskStat:0,
                    layout:'home',
                    taskoption: [
                    { text: '全部任务', taskStat: 0 },
                    { text: '已完成', taskStat: 1 },
                    { text: '未完成', taskStat: 2 }
                ]
                },
                methods: {
                    reHome(){
                        this.layout = 'home';
                        this.$nextTick(()=>{initSwiper()})
                    }
                },
            })
            Img = [];
            function initSwiper() {
            var slides = document.querySelectorAll(".swiper-slide");
            for (i = 0; i < slides.length; i++) {
            Img[i] = new Image();
            Img[i].src = slides[i].getAttribute('data-poster');  //将全部图片预存储
            };
            slidesLength = slides.length -1
            tweenObj = {
            translate: 0
            };
            var canvas = document.getElementById("shows");
            ctx = canvas.getContext("2d");
                var swiper = new Swiper('.swiper',{
                    speed:1000,
                    resistanceRatio : 0,//不允许边缘拖动
                    on: {
                        init: function() {
                              resize(this);
                        },
                        resize: function() {
                              resize(this);
                        },
                        setTranslate: function() {
                              draw(this, 0.5);  //拿swiper的speed也可以,this.params.speed/1000
                        },
                    },
                    direction:'horizontal',
                    // loop:true,
                    pagination: {
                          el: '.swiper-pagination',
                          indicatorDots: true,
                    },
                    autoplay:{
                        disableOnInteraction: false,
                     },
                    lazyloading:true,
                    observeParents:true,
                    observer:true,
                });
                 function resize(swiper) {
                     clientWidth = document.body.clientWidth
                     clientHeight = document.body.clientHeight
                     canvas.width = clientWidth;
                     canvas.height = clientHeight;//canvas高度满屏,通过swiper container高度切割
                     for(i=0; i< Img.length; i++){
                         //图片宽度满屏时,每个图片的高度
                         Img[i].fullHeight = clientWidth/Img[i].width*Img[i].height;  
                         }
                     draw(swiper);
                 }
              
                 function draw(swiper, speed) {
                     //对swiper位移进行动画,并根据动画进度实时画图
                     TweenMax.to(tweenObj, speed, {translate: swiper.translate, ease: Power2.easeOut, 
                         onUpdate: function() {
                         translate = tweenObj.translate
                         //左边slide索引 
                         iLeft = Math.floor(-translate / clientWidth)
                         if(iLeft > slidesLength){//当窗口resize变小时,translate会瞬间超过最大translate导致slide不准确,因此不可超过最大slide
                             iLeft = slidesLength
                         }
                
                         //右边slide索引
                         iRight =     iLeft+1 
                         if(iRight > slidesLength){
                             iRight = slidesLength
                         }
                
                        //移动比例
                         percent = (-translate / clientWidth).toFixed(5) - iLeft
                    
                         //根据左右图片和移动比例得出相应高度
                         currentHeight = (Img[iRight].fullHeight - Img[iLeft].fullHeight )*percent + Img[iLeft].fullHeight
                        
                         //画点左边宽度和画点右边位置,左边位置为0
                         drawLeft = clientWidth  + translate % clientWidth 
                         //右边宽度
                         drawRight = -translate % clientWidth
                        
                         //裁剪左边宽度
                         cutLeft = drawLeft * Img[iLeft].width / clientWidth * Img[iLeft].fullHeight /currentHeight 
                        
                         //裁剪左边位置
                         cutLeftPosition = Img[iLeft].width - cutLeft
                        
                         //裁剪右边宽度,裁剪右边位置为0
                         cutRight = drawRight * Img[iRight].width / clientWidth * Img[iRight].fullHeight / currentHeight 
                        
                         //左图裁剪
                         ctx.drawImage(Img[iLeft], cutLeftPosition, 0, cutLeft, Img[iLeft].height, 0, 0,drawLeft, currentHeight);
                        
                         //右图裁剪
                         ctx.drawImage(Img[iRight], 0, 0, cutRight, Img[iRight].height, drawLeft, 0,drawRight, currentHeight);
                        
                         swiper.el.style.height = currentHeight +'px'; //裁切高度
                         }
                     })
                 }
            }
            window.onload = initSwiper;
            
          
    </script>
</body>
<style scoped>
/* .home .roll .Fc .edit_dev >>> .el-transfer {
    width: 100px;
}    */
</style>
</html>


*{
    margin:0;
    padding: 0;
}
html{
    /*代表了100px=1rem*/
    font-size: 13.33333333vw;
}

/*防止大屏幕字体过大*/
@media(min-width:750px){             
    html{
        font-size: 100px;
    }
}

/*home头部*/
.home{
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
}
.home .head{
    width: 100%;
    height: 1rem;
    display: flex;
    background-color:white;
    flex-direction: row;
    /* justify-content: center;
    align-items: flex-start; */
    /* color: skyblue; */
    align-content: space-between;
    
}
.head .return{
    width:15%;
    height: 15%;
   
}
.head .zhisi{
    font-size: 40%;
    border-left: 10%;
    text-align: center;
}
.home .roll{
    width: 100%;
    height: 100%;
    display: flex;
    display: -webkit-flex;
    flex: 1;
    background-color:#F2F6FC;
    overflow-y:scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    -webkit-align-self: stretch;
    flex-direction: column;
}
.home .roll .modules{
    width:100%;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    padding: 0.3rem 0;
}
.home .roll .modules a{
    display: block;
    text-decoration: none;
}
.home .roll .modules .item{
    width: 33%;
    height: 2.49rem;
    font-size: 0.3rem;
}
.home .roll .modules .item .item-img img{
    width: 0.915rem;
    height: 0.915rem;
    background-size: 3.75rem 1.86rem;
    margin:0.2rem auto;
}
.home .foot{
    width: 100%;
    height: 5%;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    /* padding: 0.3rem 0; */
    background-color: white;
    align-items: flex-end;
    /* border-top-left-radius: 30px;
    border-top-right-radius: 30px; */
}
.home .foot .footbotten{
    width: 50%;
    font-size: 0.3rem;
}
.home .foot .footbotten img{
    width: 0.615rem;
    /* height: 0.615rem; */
    background-size: 3.75rem 1.86rem;
    margin:0.1rem auto;
}

.home .roll .banner {
      /* position: relative; */
      height: 30%;
      width: 100%;
      margin:0;
      padding:0;
    }
    .home .roll .banner .swiper{
      width: 100%;
      height: 10rem;
    }
    .home .roll .banner .swiper-slide{
      width:auto;
      height:100%;
     }
     .home .roll .banner .swiper-slide img{
      display:block;
     }    
     .home .roll .banner .swiper .swiper-pagination .swiper-pagination-bullet{
        width:0.5rem;
        height: 0.1rem;
        background-color: rgba(85, 246, 5, 0.6);
        opacity: 0.6;
        border-radius: 2px;
        margin:0;
        margin-bottom: -13px;
     }
     .home .roll .banner .swiper .swiper-pagination .swiper-pagination-bullet-active{
        background-color: orange;
        opacity: 1;
     }

  • 写回答

2条回答 默认 最新

  • CSDN专家-showbo 2022-08-17 10:43
    关注

    第一个问题,html,body需要设置高度100%才行

    
    
        body, html, #app {
            height: 100%
        }
    
        .home .foot .footbotten img {
            vertical-align: top
        }
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 8月25日
  • 已采纳回答 8月17日
  • 修改了问题 8月16日
  • 创建了问题 8月16日

悬赏问题

  • ¥15 django5安装失败
  • ¥15 Java与Hbase相关问题
  • ¥15 ANSYS分析简单钎焊问题
  • ¥20 bash代码推送不上去 git fetch origin master #失败了
  • ¥15 LOL外服加入了反作弊系统,现在游戏录像rofl文件离线都无法打开
  • ¥15 在centos7安装conda
  • ¥15 c#调用yolo3 dll文件获取的数据对不上
  • ¥20 WPF 如何实现多语言,label 和cs(live Charts)中是否都能翻译
  • ¥15 STM32F103上电短路问题
  • ¥15 打开软件提示错误:failed to get wglChoosePixelFormatARB