用的flex布局，引入vue和element
问题1：想固定上下导航栏，中间的滚动部分使用了网上找的轮播图高度自适应，百度了几种办法都没有用。
问题2：这个轮播图第一次加载的时候第一张图片不显示，滑动了以后才显示 。
问题2：顶部导航栏(head)想实现一个元素居左一个元素居中，但在head的子元素中使用justify-content并没有生效。
问题3：引用elementui，有一部分生效，有一部分无效如按钮。
问题4：有知道elementui的这个穿梭框红色部分怎么放到第一个穿梭框的下面吗？
<!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;
}
