轮播图、选项卡、新闻栏目、登录界面、个人列表
<template>
<view class="content">
<!-- 轮播图 -->
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" circular :duration="1000">
<swiper-item class="swiper-item" v-for="(item,index) in swiperList" :key="index">
<image :src="item.imgUrl" mode=""></image>
</swiper-item>
</swiper>
<!-- 标题区域 -->
<view class="title-zone" style="width: 750upx;height: 300upx;background-color: #eee;margin-top: 10upx;display: flex;align-items: center;">
<view class="" style="margin-left: 10upx;width: 200upx;height: 200upx;background-color: #ccc;border-radius: 50%;">
<!-- <text style="color: white;font-size: 50upx;line-height: 200upx;display: inline-block;margin-left: 55upx;">A-3</text> -->
<image src="../../static/logo.png" style="width: 100%;height: 100%;border-radius: 50%;" mode=""></image>
</view>
<view class="" style="display: flex;flex-direction: column;padding-left: 40upx;">
<text style="font-weight: bolder;">A-3 TITLE</text>
<text style="padding-top: 10upx;font-size: 20upx;color: #C8C7CC;">A-3</text>
</view>
</view>
<!-- tab选项卡 -->
<scroll-view style="white-space: nowrap;background-color: #EED8AE;" scroll-x="true">
<view style="display: flex;width: 120upx;height: 80upx;text-align: center;line-height: 80upx;display: inline-block;margin-left: 10upx;"
v-for="(item,index) in scrollList" :key="index" @tap="handleSelected(index)" :class="{'on':item.selected}">
{{item.title}}
</view>
</scroll-view>
<view style="margin-top: 10upx;"></view>
<!-- 用户界面 -->
<view class="" style="width: 600upx;margin: 0 auto;">
<form action="" @submit="formSubmit">
<h2 style="text-align: center;border-bottom: 1upx solid #eee;padding-bottom: 40upx;">用户登录</h2>
<table style="">
<tr>
<td><input type="text" placeholder="请输如用户名" style="width: 590upx;height: 80upx;border: 1upx solid #ccc;margin-top: 60upx;" name="userName" id=""></td>
</tr>
<tr>
<td><input password="" type="text" placeholder="请输如密码" style="width: 590upx;height: 80upx;border: 1upx solid #ccc;margin-top: 40upx;" name="password" id=""></td>
</tr>
</table>
<button style="margin-top: 20upx;" type="primary" form-type="submit">登录</button>
</form>
</view>
<view style="margin-top: 80upx;border-bottom: #eee 1upx solid;"></view>
<!-- 列表卡 -->
<view class="container">
<view class="item" v-for="(item,index) in itemList" :key="index">
<view style="display: flex;">
<image :src="item.icon" mode=""></image>
<view style="padding-left: 20upx;">{{item.title}}</view>
</view>
<view class="">
<image :src="item.arrow" mode=""></image>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
scrollList: [{
title: '财经',
selected: true
},
{
title: '体育',
selected: false
},
{
title: '影视',
selected: false
},
{
title: '科技',
selected: false
},
{
title: '社会',
selected: false
},
{
title: '军事',
selected: false
},
{
title: '教育',
selected: false
},
{
title: '汽车',
selected: false
},
{
title: '社会',
selected: false
}
],
swiperList: [{
imgUrl: '../../static/swiper1.jpg'
},
{
imgUrl: '../../static/swiper2.jpg'
},
{
imgUrl: '../../static/swiper3.jpg'
},
{
imgUrl: '../../static/swiper4.jpg'
},
{
imgUrl: '../../static/swiper5.jpg'
}
],
itemList:[
{
icon:'../../static/itemIcon/payment.png',
title:'支付',
arrow:'../../static/itemIcon/arrow.png'
},
{
icon:'../../static/itemIcon/save.png',
title:'收藏',
arrow:'../../static/itemIcon/arrow.png'
},
{
icon:'../../static/itemIcon/friendCircle.png',
title:'朋友圈',
arrow:'../../static/itemIcon/arrow.png'
},
{
icon:'../../static/itemIcon/wallet.png',
title:'卡包',
arrow:'../../static/itemIcon/arrow.png'
},
{
icon:'../../static/itemIcon/emotion.png',
title:'表情',
arrow:'../../static/itemIcon/arrow.png'
},
{
icon:'../../static/itemIcon/reset.png',
title:'设置',
arrow:'../../static/itemIcon/arrow.png'
}
]
}
},
onLoad() {
},
methods: {
handleSelected(index) {
console.log(index)
this.scrollList[index].selected = true
for (let i = 0; i < this.scrollList.length; i++) {
if (i != index) {
this.scrollList[i].selected = false
}
}
},
formSubmit(e){
// console.log(e)
console.log('账号是：',e.detail.value.userName)
console.log('密码是：',e.detail.value.password)
}
}
}
</script>
<style lang="scss">
.content {
height: 100vh;
}
.swiper-item {
width: 750upx;
border-radius: 25upx;
padding-left: 6upx;
}
.swiper-item image {
height: 100%;
width: 100%;
border-radius: 25upx;
}
.on {
color: white;
border: 1upx solid #4CD964;
background-color: #4CD964;
border-radius: 40upx;
font-weight: bolder;
}
.container {
width: 650upx;
margin: 0 auto;
.item {
height: 120upx;
// border: 1upx solid red;
display: flex;
align-items: center;
border-bottom: 1upx solid #eee;
justify-content: space-between;
image{
width: 50upx;
height: 50upx;
}
}
}
</style>
网友评论