新增首页
This commit is contained in:
parent
fba3050cda
commit
2816f17e5c
|
|
@ -1,5 +1,62 @@
|
||||||
<template>
|
<template>
|
||||||
<app-layout title="首页" btnType="unset"></app-layout>
|
<app-layout btnType="unset" headerBackgroundColor="unset" :hasPaddingTop="false">
|
||||||
|
<view class="index-container">
|
||||||
|
<view class="page-background-image">
|
||||||
|
<image class="background-image" :src="backgroundImage" mode="aspectFill" />
|
||||||
|
</view>
|
||||||
|
<view class="index-body">
|
||||||
|
<view class="notify">
|
||||||
|
<view class="icon">
|
||||||
|
<text class="iconfont icon-gonggao"></text>
|
||||||
|
<text class="text">公告</text>
|
||||||
|
</view>
|
||||||
|
<view class="slide-box">
|
||||||
|
<swiper
|
||||||
|
class="notify-swiper"
|
||||||
|
circular
|
||||||
|
:indicator-dots="false"
|
||||||
|
:autoplay="true"
|
||||||
|
:vertical="true"
|
||||||
|
interval="3000"
|
||||||
|
duration="1000"
|
||||||
|
>
|
||||||
|
<swiper-item v-for="(item, index) in notifyList" :key="index">
|
||||||
|
<view class="swiper-item notify-item">
|
||||||
|
<text class="limit-line clamp-1">
|
||||||
|
{{ item.title }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="nav">
|
||||||
|
<view class="nav-item" v-for="(item, index) in navList" :key="index">
|
||||||
|
<image class="icon" :src="item.icon" mode="aspectFill" />
|
||||||
|
<text class="title">{{ item.name }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="action-group">
|
||||||
|
<view class="item">
|
||||||
|
<text class="num">{{ action.item1 }}</text>
|
||||||
|
<text class="title">立即抢单</text>
|
||||||
|
</view>
|
||||||
|
<view class="item">
|
||||||
|
<text class="num">{{ action.item2 }}</text>
|
||||||
|
<text class="title">立即报价</text>
|
||||||
|
</view>
|
||||||
|
<view class="item">
|
||||||
|
<text class="num">{{ action.item3 }}</text>
|
||||||
|
<text class="title">配送抢单</text>
|
||||||
|
</view>
|
||||||
|
<view class="item">
|
||||||
|
<text class="num">{{ action.item4 }}</text>
|
||||||
|
<text class="title">指派专区</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</app-layout>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -7,7 +64,63 @@ import AppLayout from "@/components/layout/layout";
|
||||||
export default {
|
export default {
|
||||||
name: "index",
|
name: "index",
|
||||||
data() {
|
data() {
|
||||||
return {};
|
return {
|
||||||
|
backgroundImage: require("@/static/temp/auth/1.png"),
|
||||||
|
notifyList: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: "恭喜成都市王先生订购xxxxxx服务一套",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: "恭喜成都市王先生订购xxxxxx服务一套",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: "恭喜成都市王先生订购xxxxxx服务一套",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
title: "恭喜成都市王先生订购xxxxxx服务一套",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
title: "恭喜成都市王先生订购xxxxxx服务一套",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
navList: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
icon: require("@/static/temp/index/1.png"),
|
||||||
|
name: "接单大厅",
|
||||||
|
page: "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
icon: require("@/static/temp/index/2.png"),
|
||||||
|
name: "平台规则",
|
||||||
|
page: "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
icon: require("@/static/temp/index/3.png"),
|
||||||
|
name: "平台客服",
|
||||||
|
page: "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
icon: require("@/static/temp/index/4.png"),
|
||||||
|
name: "帮助中心",
|
||||||
|
page: "",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
action: {
|
||||||
|
item1: 1,
|
||||||
|
item2: 2,
|
||||||
|
item3: 3,
|
||||||
|
item4: 4,
|
||||||
|
},
|
||||||
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
AppLayout,
|
AppLayout,
|
||||||
|
|
@ -21,4 +134,130 @@ export default {
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped></style>
|
<style lang="less" scoped>
|
||||||
|
.page-background-image {
|
||||||
|
width: 100%;
|
||||||
|
line-height: 0;
|
||||||
|
.background-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 590rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.index-body {
|
||||||
|
position: relative;
|
||||||
|
width: 710rpx;
|
||||||
|
background: #ffffff;
|
||||||
|
margin: -225rpx auto 0 auto;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 20rpx;
|
||||||
|
}
|
||||||
|
.notify {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-bottom: 14rpx solid #efefef;
|
||||||
|
padding: 20rpx 0 30rpx 0;
|
||||||
|
.icon {
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.iconfont {
|
||||||
|
font-size: 40rpx;
|
||||||
|
color: #f9b060;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: italic;
|
||||||
|
color: #7286f1;
|
||||||
|
margin-left: 8rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.slide-box {
|
||||||
|
width: 100%;
|
||||||
|
height: 40rpx;
|
||||||
|
margin-left: 26rpx;
|
||||||
|
line-height: 40rpx;
|
||||||
|
.notify-swiper {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.notify-item {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nav {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 36rpx 15rpx 50rpx 15rpx;
|
||||||
|
border-bottom: 2rpx solid #efefef;
|
||||||
|
.nav-item {
|
||||||
|
width: 100rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.icon {
|
||||||
|
width: 100rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.nav-item:nth-child(4n) {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.action-group {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 50rpx 0 70rpx 0;
|
||||||
|
.item {
|
||||||
|
width: 324rpx;
|
||||||
|
height: 224rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
margin-right: 22rpx;
|
||||||
|
margin-top: 22rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
color: #ffffff;
|
||||||
|
.num {
|
||||||
|
font-size: 100rpx;
|
||||||
|
line-height: 100rpx;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 36rpx;
|
||||||
|
line-height: 36rpx;
|
||||||
|
margin-top: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item:nth-child(1),
|
||||||
|
.item:nth-child(2) {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.item:nth-child(2n) {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
.item:nth-child(1) {
|
||||||
|
background: linear-gradient(135deg, #fec04b, #eacc52, #f0d8a3);
|
||||||
|
}
|
||||||
|
.item:nth-child(2) {
|
||||||
|
background: linear-gradient(135deg, #f69029, #f7b13d, #fec54c);
|
||||||
|
}
|
||||||
|
.item:nth-child(3) {
|
||||||
|
background: linear-gradient(135deg, #3e61ee, #5b80dd, #6999fd);
|
||||||
|
}
|
||||||
|
.item:nth-child(4) {
|
||||||
|
background: linear-gradient(135deg, #328eff, #2fb2fe, #44c2ee);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Loading…
Reference in New Issue