262 lines
8.1 KiB
Vue
262 lines
8.1 KiB
Vue
<template>
|
|
<app-layout v-model="safePt" btnType="unset" headerBackgroundColor="unset" :showHeader="false">
|
|
<view class="index-container">
|
|
<view class="immerse-image">
|
|
<image class="image" :src="backgroundImage" mode="aspectFill" />
|
|
</view>
|
|
<view class="immerse-main" :style="{ paddingTop: safePt + utils.rpx2px(20) + 'px' }">
|
|
<view class="head-title">
|
|
<text class="title">熊熊建材安装<text class="color">师傅版</text></text>
|
|
<text class="desc">将好师傅交给用户让好服务走进万家 </text>
|
|
</view>
|
|
<view class="section">
|
|
<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" @click="utils.toPage(item.page)">
|
|
<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>
|
|
</view>
|
|
</app-layout>
|
|
</template>
|
|
|
|
<script>
|
|
import AppLayout from "@/components/layout/layout";
|
|
export default {
|
|
name: "index",
|
|
data() {
|
|
return {
|
|
utils: this.$utils,
|
|
safePt: 0,
|
|
backgroundImage: require("@/static/temp/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: "/pages/get/index",
|
|
},
|
|
{
|
|
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: {
|
|
AppLayout,
|
|
},
|
|
onLoad() {},
|
|
onShow() {},
|
|
onReady() {},
|
|
onReachBottom() {},
|
|
onPullDownRefresh() {},
|
|
methods: {},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.section {
|
|
width: 710rpx;
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
background-color: #ffffff;
|
|
margin: 24rpx auto 0 auto;
|
|
}
|
|
.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> |