新增首页

src/pages/index/index.vue

@@ -1,5 +1,62 @@
 <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>
 
 <script>
@@ -7,7 +64,63 @@ import AppLayout from "@/components/layout/layout";
 export default {
     name: "index",
     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: {
         AppLayout,
@@ -21,4 +134,130 @@ export default {
 };
 </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>