|
|
@@ -1,201 +1,549 @@
|
|
|
+<!--
|
|
|
+ 商城「我的」Tab 页
|
|
|
+ 展示用户信息、订单快捷入口与常用服务菜单,配合原生 tabBar 使用。
|
|
|
+-->
|
|
|
<template>
|
|
|
- <view class="app-main app-content">
|
|
|
- <view class="user-wrap">
|
|
|
- <template>
|
|
|
- <view class="is-login-attr">
|
|
|
- <view class="user-wrap-top">
|
|
|
- <view class="user-blo-left">
|
|
|
- <view class="user-name-warp" v-if="!$util.isEmpty(loginInfo)"> <view class="user-name">{{loginInfo.name||'游客'}}</view> </view>
|
|
|
- <view class="user-name-warp" @click="pageTo({url:'/pages/login/index'})" v-else> <view class="user-name">注册/登录</view> </view>
|
|
|
- <view class="user-level" v-if="!$util.isEmpty(loginInfo)"><view>ID {{loginInfo.id||'0000'}}</view></view>
|
|
|
- </view>
|
|
|
- <view class="user-blo-right login-attr-wrap">
|
|
|
- <image :src="`${constant.imgUrl}/default-img.png`" mode="widthFix"></image>
|
|
|
- </view>
|
|
|
+ <view class="user-page">
|
|
|
+ <!-- 自定义顶栏:绿色标题 + 消息/设置 -->
|
|
|
+ <view class="user-nav">
|
|
|
+ <view class="user-nav__status" :style="{ height: navMetrics.statusBarHeight + 'px' }"></view>
|
|
|
+ <view class="user-nav__bar" :style="{ height: navMetrics.navBarHeight + 'px' }">
|
|
|
+ <view class="user-nav__title-wrap" :style="titleWrapStyle">
|
|
|
+ <text class="user-nav__title">我的</text>
|
|
|
+ </view>
|
|
|
+ <view class="user-nav__actions">
|
|
|
+ <view class="user-nav__action" @click="goChat">
|
|
|
+ <sprite-icon name="xiaoxi" :size="40" custom-class="nav-icon" />
|
|
|
+ </view>
|
|
|
+ <view class="user-nav__action user-nav__action--settings" @click="goSettings">
|
|
|
+ <sprite-icon name="shezhi" :size="36" custom-class="nav-icon" />
|
|
|
</view>
|
|
|
</view>
|
|
|
- </template>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <template>
|
|
|
- <view class="surplus-wrap">
|
|
|
- <view class="surplus-left">
|
|
|
- <view>余额</view>
|
|
|
- <view class="my-surplus">0</view>
|
|
|
+
|
|
|
+ <view class="user-body" :style="bodyStyle">
|
|
|
+ <!-- 用户信息卡片 -->
|
|
|
+ <view class="profile-card" @click="onProfileClick">
|
|
|
+ <view class="profile-card__bg"></view>
|
|
|
+ <view class="profile-card__content">
|
|
|
+ <view class="profile-avatar">
|
|
|
+ <image
|
|
|
+ class="profile-avatar__img"
|
|
|
+ :src="avatarUrl"
|
|
|
+ mode="aspectFill"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ <view class="profile-info">
|
|
|
+ <text class="profile-name">{{ displayName }}</text>
|
|
|
+ <text v-if="isLoggedIn" class="profile-id">会员ID: {{ memberId }}</text>
|
|
|
+ <text v-else class="profile-id profile-id--hint">登录后查看会员信息</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </template>
|
|
|
- <view class="list-content" v-if="!$util.isEmpty(loginInfo)">
|
|
|
- <tui-list-view class="tui-list-view">
|
|
|
- <tui-list-cell class="tui-list" :arrow="true" @click="pageToFn({ url: '/pages/home/order', type: 4 })" >
|
|
|
- <view class="list-wrap">
|
|
|
- <view class="list-label">我的订单</view>
|
|
|
+
|
|
|
+ <!-- 我的订单 -->
|
|
|
+ <view class="section-card">
|
|
|
+ <view class="section-header">
|
|
|
+ <text class="section-title">我的订单</text>
|
|
|
+ <view class="section-link" @click="goAllOrders">
|
|
|
+ <text class="section-link__text">查看全部</text>
|
|
|
+ <text class="section-link__arrow">›</text>
|
|
|
</view>
|
|
|
- </tui-list-cell>
|
|
|
- <tui-list-cell class="tui-list" :arrow="true" @click="pageToFn('/pages/coupon/list')" >
|
|
|
- <view class="list-wrap">
|
|
|
- <view class="list-label">我的优惠券</view>
|
|
|
+ </view>
|
|
|
+ <view class="order-grid">
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in orderShortcuts"
|
|
|
+ :key="item.key"
|
|
|
+ class="order-item"
|
|
|
+ :class="{ 'order-item--first': index === 0 }"
|
|
|
+ @click="goOrderStatus(item)"
|
|
|
+ >
|
|
|
+ <view class="order-icon-wrap" :class="'order-icon-wrap--' + item.theme">
|
|
|
+ <sprite-icon :name="item.icon" :size="item.iconSize" custom-class="order-icon" />
|
|
|
+ </view>
|
|
|
+ <text class="order-item__label">{{ item.name }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 我的服务 -->
|
|
|
+ <view class="section-card">
|
|
|
+ <view class="section-header section-header--solo">
|
|
|
+ <text class="section-title">我的服务</text>
|
|
|
+ </view>
|
|
|
+ <view class="service-list">
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in serviceItems"
|
|
|
+ :key="item.key"
|
|
|
+ class="service-item"
|
|
|
+ :class="{ 'service-item--first': index === 0 }"
|
|
|
+ @click="onServiceClick(item)"
|
|
|
+ >
|
|
|
+ <view class="service-item__left">
|
|
|
+ <sprite-icon
|
|
|
+ v-if="item.icon"
|
|
|
+ :name="item.icon"
|
|
|
+ :size="item.iconSize || 48"
|
|
|
+ custom-class="service-icon"
|
|
|
+ />
|
|
|
+ <text v-else class="iconfont service-iconfont" :class="item.iconfont"></text>
|
|
|
+ <text class="service-item__label">{{ item.name }}</text>
|
|
|
+ </view>
|
|
|
+ <text class="service-item__arrow">›</text>
|
|
|
</view>
|
|
|
- </tui-list-cell>
|
|
|
- </tui-list-view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
+
|
|
|
<script>
|
|
|
+/**
|
|
|
+ * 商城「我的」页
|
|
|
+ * 原生 tabBar 入口,展示会员信息、订单状态快捷入口与服务菜单
|
|
|
+ */
|
|
|
import { mapGetters } from "vuex";
|
|
|
-import TuiListView from "@/components/plugin/list-view";
|
|
|
-import TuiListCell from "@/components/plugin/list-cell";
|
|
|
-import LoginPopup from "@/pages/home/components/login-popup";
|
|
|
-import AppTrademark from "@/components/module/app-trademark";
|
|
|
-import GoLogin from "@/pages/home/components/go-login.vue";
|
|
|
-import AppVipModule from "@/components/module/app-vip";
|
|
|
+import SpriteIcon from "@/components/sprite-icon/index.vue";
|
|
|
+import { getNavBarMetrics } from "@/utils/navBar";
|
|
|
import { getShopUser } from "@/utils/auth";
|
|
|
+import { clearLogin } from "@/api/user";
|
|
|
+
|
|
|
export default {
|
|
|
name: "user",
|
|
|
components: {
|
|
|
- TuiListView,
|
|
|
- TuiListCell,
|
|
|
- LoginPopup,
|
|
|
- AppTrademark,
|
|
|
- GoLogin,
|
|
|
- AppVipModule,
|
|
|
+ SpriteIcon
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
constant: this.$constant,
|
|
|
- popupShow: false,
|
|
|
- isPublic: false,
|
|
|
- stepIndex: 0,
|
|
|
- wxInfo: {},
|
|
|
- loginShow: false,
|
|
|
- merchantInfo: {},
|
|
|
- mobile: "",
|
|
|
- subscribe: 0,
|
|
|
- currentTabIndex: 4
|
|
|
+ navMetrics: getNavBarMetrics(),
|
|
|
+ /** 订单快捷入口,status 对应 order.vue tabs.key */
|
|
|
+ orderShortcuts: [
|
|
|
+ { key: "pay", name: "待付款", icon: "qianbao", iconSize: 48, status: "1", theme: "pink" },
|
|
|
+ { key: "delivery", name: "待配送", icon: "huoche-da", iconSize: 48, status: "2", theme: "green" },
|
|
|
+ { key: "receive", name: "待收货", icon: "baoguo", iconSize: 48, status: "3", theme: "green" },
|
|
|
+ { key: "refund", name: "退款/售后", icon: "fanghu-yuan", iconSize: 48, status: "0", theme: "pink" }
|
|
|
+ ],
|
|
|
+ /** 服务菜单 */
|
|
|
+ serviceItems: [
|
|
|
+ { key: "coupon", name: "优惠券", icon: "youhuiquan-yellow", iconSize: 40, url: "/pages/hb/list" },
|
|
|
+ { key: "addressNew", name: "收货地址", iconfont: "iconditu", url: "/pages/user/address/list" },
|
|
|
+ { key: "hasDel", name: "已删花店", icon: "dianpu-fill", iconSize: 40, url: "/pages/hd/hasDel" },
|
|
|
+ { key: "logout", name: "退出登录", icon: "tuichu", iconSize: 40, action: "logout" }
|
|
|
+ ]
|
|
|
};
|
|
|
},
|
|
|
- computed: {
|
|
|
- ...mapGetters({loginInfo:"getLoginInfo"})
|
|
|
- },
|
|
|
- onLoad(option) {
|
|
|
- },
|
|
|
- methods: {
|
|
|
- init() {
|
|
|
- getShopUser(true).then(res => {})
|
|
|
+ computed: {
|
|
|
+ ...mapGetters({ loginInfo: "getLoginInfo" }),
|
|
|
+ isLoggedIn() {
|
|
|
+ return !this.$util.isEmpty(this.loginInfo);
|
|
|
+ },
|
|
|
+ displayName() {
|
|
|
+ if (!this.isLoggedIn) {
|
|
|
+ return "注册/登录";
|
|
|
+ }
|
|
|
+ return this.loginInfo.name || "游客";
|
|
|
+ },
|
|
|
+ memberId() {
|
|
|
+ return this.loginInfo.id || "--";
|
|
|
},
|
|
|
- pageToFn(item) {
|
|
|
- this.$util.pageTo(item)
|
|
|
+ avatarUrl() {
|
|
|
+ if (this.loginInfo && this.loginInfo.avatar) {
|
|
|
+ return this.loginInfo.avatar;
|
|
|
+ }
|
|
|
+ return `${this.constant.imgUrl}/retail/default-img.png`;
|
|
|
+ },
|
|
|
+ titleWrapStyle() {
|
|
|
+ const inset = this.navMetrics.titleSideInset + "px";
|
|
|
+ return {
|
|
|
+ paddingLeft: inset,
|
|
|
+ paddingRight: inset
|
|
|
+ };
|
|
|
+ },
|
|
|
+ bodyStyle() {
|
|
|
+ const paddingTop = this.navMetrics.navTotalHeight + uni.upx2px(24);
|
|
|
+ return `padding-top: ${paddingTop}px;`;
|
|
|
}
|
|
|
},
|
|
|
-};
|
|
|
-</script>
|
|
|
-<style lang="scss" scoped>
|
|
|
-.user-wrap {
|
|
|
- height: 220upx;
|
|
|
- background-image: url("../../static/images/user/bg.png");
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- padding-top: 42upx;
|
|
|
- color: #f5e5e5;
|
|
|
- .login-attr-wrap {
|
|
|
- width: 90upx;
|
|
|
- height: 90upx;
|
|
|
- border-radius: 50%;
|
|
|
- image {
|
|
|
- border-radius: 50%;
|
|
|
+ onShow() {
|
|
|
+ if (this.isLoggedIn) {
|
|
|
+ getShopUser(true).then(() => {});
|
|
|
}
|
|
|
- }
|
|
|
- .no-login-attr {
|
|
|
- margin: 0 auto;
|
|
|
- margin-bottom: 12upx;
|
|
|
- }
|
|
|
- .is-login-attr {
|
|
|
- padding: 0 20upx 0 48upx;
|
|
|
- .user-wrap-top {
|
|
|
- @include disFlex(center, space-between);
|
|
|
- .user-name-warp {
|
|
|
- @include disFlex(center, flex-start);
|
|
|
- margin-bottom: 16upx;
|
|
|
- .user-name {
|
|
|
- font-size: 36upx;
|
|
|
- font-weight: 600;
|
|
|
- color: #fff;
|
|
|
- margin-right: 20upx;
|
|
|
- }
|
|
|
- .level-img {
|
|
|
- ::v-deep.vip-text {
|
|
|
- top: 4upx;
|
|
|
- left: 42upx;
|
|
|
- transform: scale(0.8);
|
|
|
- }
|
|
|
- }
|
|
|
- .nomal-text {
|
|
|
- font-size: 24upx;
|
|
|
- padding: 2upx 16upx;
|
|
|
- color: #f7f7f7;
|
|
|
- border: 1upx solid #f7f7f7;
|
|
|
- display: inline-block;
|
|
|
- border-radius: 50upx;
|
|
|
- }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /** 未登录时引导登录 */
|
|
|
+ requireLogin() {
|
|
|
+ if (this.isLoggedIn) {
|
|
|
+ return true;
|
|
|
}
|
|
|
- .user-level {
|
|
|
- @include disFlex(center, flex-start);
|
|
|
+ this.pageTo({ url: "/pages/login/index?needBack=1" });
|
|
|
+ return false;
|
|
|
+ },
|
|
|
+ onProfileClick() {
|
|
|
+ if (!this.isLoggedIn) {
|
|
|
+ this.pageTo({ url: "/pages/login/index?needBack=1" });
|
|
|
+ return;
|
|
|
}
|
|
|
- .user-blo-right {
|
|
|
- margin-right: 30upx;
|
|
|
+ this.pageTo({ url: "/pages/user/edit" });
|
|
|
+ },
|
|
|
+ goChat() {
|
|
|
+ if (!this.requireLogin()) {
|
|
|
+ return;
|
|
|
}
|
|
|
- }
|
|
|
- .user-wrap-bottom {
|
|
|
- .level-lint {
|
|
|
- border-bottom: 4upx solid $mainColor;
|
|
|
- border-radius: 4upx;
|
|
|
- margin-top: 20upx;
|
|
|
- margin-bottom: 10upx;
|
|
|
- position: relative;
|
|
|
+ this.pageTo({ url: "/pages/chat/list" });
|
|
|
+ },
|
|
|
+ goSettings() {
|
|
|
+ if (!this.requireLogin()) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.pageTo({ url: "/pages/user/edit" });
|
|
|
+ },
|
|
|
+ /** 跳转订单 Tab,全部订单 */
|
|
|
+ goAllOrders() {
|
|
|
+ if (!this.requireLogin()) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.pageTo({
|
|
|
+ url: "/pages/home/order",
|
|
|
+ type: 4,
|
|
|
+ query: { status: "0" }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 按订单状态跳转订单 Tab */
|
|
|
+ goOrderStatus(item) {
|
|
|
+ if (!this.requireLogin()) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.pageTo({
|
|
|
+ url: "/pages/home/order",
|
|
|
+ type: 4,
|
|
|
+ query: { status: item.status || "0" }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onServiceClick(item) {
|
|
|
+ if (item.action === "logout") {
|
|
|
+ this.handleLogout();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.requireLogin()) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (item.url) {
|
|
|
+ this.pageTo({ url: item.url });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** 退出登录,逻辑与个人信息页保持一致 */
|
|
|
+ handleLogout() {
|
|
|
+ if (!this.isLoggedIn) {
|
|
|
+ this.$msg("当前未登录");
|
|
|
+ return;
|
|
|
}
|
|
|
+ this.$util.confirmModal({ content: "确认退出?" }, () => {
|
|
|
+ // #ifdef APP-PLUS
|
|
|
+ uni.clearStorage();
|
|
|
+ this.$store.commit("setLoginInfo", {});
|
|
|
+ plus.runtime.restart();
|
|
|
+ // #endif
|
|
|
+ // #ifdef MP-WEIXIN
|
|
|
+ clearLogin().then((res) => {
|
|
|
+ if (res.code == 1) {
|
|
|
+ uni.clearStorage();
|
|
|
+ this.$store.commit("setLoginInfo", {});
|
|
|
+ uni.reLaunch({ url: "/pages/home/recent" });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // #endif
|
|
|
+ // #ifdef H5
|
|
|
+ uni.clearStorage();
|
|
|
+ this.$store.commit("setLoginInfo", {});
|
|
|
+ uni.reLaunch({ url: "/pages/home/recent" });
|
|
|
+ // #endif
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
- .button-wrap {
|
|
|
- @include disFlex(center, center);
|
|
|
+};
|
|
|
+</script>
|
|
|
|
|
|
- .mini-btn {
|
|
|
- border: none !important;
|
|
|
- }
|
|
|
- }
|
|
|
+<style lang="scss" scoped>
|
|
|
+.user-page {
|
|
|
+ min-height: 100vh;
|
|
|
+ background: #f3f4f6;
|
|
|
+ padding-bottom: calc(20upx + env(safe-area-inset-bottom));
|
|
|
}
|
|
|
-.surplus-wrap {
|
|
|
- @include disFlex(flex-end, space-between);
|
|
|
- padding: 10upx 40upx 34upx;
|
|
|
- background-color: #fff;
|
|
|
- .surplus-left {
|
|
|
- color: $fontColor3;
|
|
|
- .my-surplus {
|
|
|
- font-size: 46upx;
|
|
|
- margin-top: 14upx;
|
|
|
- color: #333;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- }
|
|
|
- .surplus-right {
|
|
|
- margin-bottom: 10upx;
|
|
|
- .button-com {
|
|
|
- margin-left: 20upx;
|
|
|
- }
|
|
|
+
|
|
|
+.user-nav {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ z-index: 100;
|
|
|
+ background-color: #ffffff;
|
|
|
+}
|
|
|
+
|
|
|
+.user-nav__bar {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.user-nav__title-wrap {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ pointer-events: none;
|
|
|
+}
|
|
|
+
|
|
|
+.user-nav__title {
|
|
|
+ font-size: 34upx;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #77c34f;
|
|
|
+}
|
|
|
+
|
|
|
+.user-nav__actions {
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ margin-left: auto;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ padding-right: 24upx;
|
|
|
+}
|
|
|
+
|
|
|
+.user-nav__action {
|
|
|
+ width: 72upx;
|
|
|
+ height: 72upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-left: 8upx;
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ margin-left: 0;
|
|
|
}
|
|
|
}
|
|
|
-.list-content {
|
|
|
- margin-bottom: 20upx;
|
|
|
- background-color: #fff;
|
|
|
- .tui-list-cell {
|
|
|
- padding-left: 50upx;
|
|
|
- padding-right: 50upx;
|
|
|
+
|
|
|
+.user-nav__action--settings {
|
|
|
+ margin-left: 4upx;
|
|
|
+}
|
|
|
+
|
|
|
+.user-body {
|
|
|
+ padding-left: 24upx;
|
|
|
+ padding-right: 24upx;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.profile-card {
|
|
|
+ position: relative;
|
|
|
+ border-radius: 24upx;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-bottom: 24upx;
|
|
|
+ box-shadow: 0 8upx 24upx rgba(15, 23, 42, 0.06);
|
|
|
+}
|
|
|
+
|
|
|
+.profile-card__bg {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background: linear-gradient(135deg, #fce7f3 0%, #fdf2f8 45%, #ffffff 100%);
|
|
|
+}
|
|
|
+
|
|
|
+.profile-card__content {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ padding: 36upx 32upx;
|
|
|
+}
|
|
|
+
|
|
|
+.profile-avatar {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 120upx;
|
|
|
+ height: 120upx;
|
|
|
+ border-radius: 50%;
|
|
|
+ overflow: hidden;
|
|
|
+ border: 4upx solid rgba(255, 255, 255, 0.9);
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.profile-avatar__img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.profile-info {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+ margin-left: 28upx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.profile-name {
|
|
|
+ font-size: 36upx;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #1f2937;
|
|
|
+ line-height: 1.3;
|
|
|
+ margin-bottom: 12upx;
|
|
|
+}
|
|
|
+
|
|
|
+.profile-id {
|
|
|
+ font-size: 24upx;
|
|
|
+ color: #9ca3af;
|
|
|
+ line-height: 1.4;
|
|
|
+}
|
|
|
+
|
|
|
+.profile-id--hint {
|
|
|
+ color: #77c34f;
|
|
|
+}
|
|
|
+
|
|
|
+.section-card {
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 24upx;
|
|
|
+ padding: 28upx 28upx 24upx;
|
|
|
+ margin-bottom: 24upx;
|
|
|
+ box-shadow: 0 8upx 24upx rgba(15, 23, 42, 0.04);
|
|
|
+}
|
|
|
+
|
|
|
+.section-header {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 28upx;
|
|
|
+}
|
|
|
+
|
|
|
+.section-header--solo {
|
|
|
+ margin-bottom: 8upx;
|
|
|
+}
|
|
|
+
|
|
|
+.section-title {
|
|
|
+ font-size: 32upx;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #1f2937;
|
|
|
+}
|
|
|
+
|
|
|
+.section-link {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.section-link__text {
|
|
|
+ font-size: 24upx;
|
|
|
+ color: #9ca3af;
|
|
|
+}
|
|
|
+
|
|
|
+.section-link__arrow {
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #9ca3af;
|
|
|
+ margin-left: 4upx;
|
|
|
+ line-height: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.order-grid {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: flex-start;
|
|
|
+}
|
|
|
+
|
|
|
+.order-item {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 12upx;
|
|
|
+
|
|
|
+ &--first {
|
|
|
+ margin-left: 0;
|
|
|
}
|
|
|
- .list-wrap {
|
|
|
- @include disFlex(center, space-between);
|
|
|
- width: calc(100% - 30upx);
|
|
|
- padding-right: 30upx;
|
|
|
- .list-text {
|
|
|
- color: $fontColor3;
|
|
|
- }
|
|
|
+}
|
|
|
+
|
|
|
+.order-icon-wrap {
|
|
|
+ width: 96upx;
|
|
|
+ height: 96upx;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-bottom: 12upx;
|
|
|
+}
|
|
|
+
|
|
|
+.order-icon-wrap--pink {
|
|
|
+ background: #fce7f3;
|
|
|
+}
|
|
|
+
|
|
|
+.order-icon-wrap--green {
|
|
|
+ background: #ecfdf3;
|
|
|
+}
|
|
|
+
|
|
|
+.order-item__label {
|
|
|
+ font-size: 24upx;
|
|
|
+ color: #4b5563;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 1.3;
|
|
|
+}
|
|
|
+
|
|
|
+.service-list {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.service-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 28upx 0;
|
|
|
+ border-top: 1upx solid #f3f4f6;
|
|
|
+ margin-top: 20upx;
|
|
|
+
|
|
|
+ &--first {
|
|
|
+ margin-top: 0;
|
|
|
+ border-top: none;
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+
|
|
|
+.service-item__left {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.service-item__left ::v-deep .service-icon {
|
|
|
+ margin-right: 20upx;
|
|
|
+}
|
|
|
+
|
|
|
+.service-iconfont {
|
|
|
+ font-size: 36upx;
|
|
|
+ color: #3b82f6;
|
|
|
+ margin-right: 20upx;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.service-item__label {
|
|
|
+ font-size: 30upx;
|
|
|
+ color: #374151;
|
|
|
+}
|
|
|
+
|
|
|
+.service-item__arrow {
|
|
|
+ font-size: 32upx;
|
|
|
+ color: #d1d5db;
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-left: 16upx;
|
|
|
+}
|
|
|
+</style>
|