فهرست منبع

feat:添加团队管理邀请功能和删除成员功能

wangsisi 2 روز پیش
والد
کامیت
08e34ecc5e

+ 10 - 10
src/App.vue

@@ -34,7 +34,7 @@
             </template>
         </tabbar-item>
         <!-- 专家 -->
-        <tabbar-item replace to="/farm_manage" v-if="curRole == 1">
+        <!-- <tabbar-item replace to="/farm_manage" v-if="curRole == 1">
             <span>农场管理</span>
             <template #icon="props">
                 <img
@@ -45,8 +45,8 @@
                     "
                 />
             </template>
-        </tabbar-item>
-        <tabbar-item replace to="/task_condition" v-if="curRole == 2">
+        </tabbar-item> -->
+        <tabbar-item replace to="/task_condition">
             <span>农事服务</span>
             <template #icon="props">
                 <img
@@ -58,7 +58,7 @@
                 />
             </template>
         </tabbar-item>
-        <tabbar-item replace to="/monitor" v-if="curRole == 0">
+        <!-- <tabbar-item replace to="/monitor" v-if="curRole == 0">
             <span>农场监测</span>
             <template #icon="props">
                 <img
@@ -69,8 +69,8 @@
                     "
                 />
             </template>
-        </tabbar-item>
-        <tabbar-item replace to="/expert_prescription" v-if="curRole == 1">
+        </tabbar-item> -->
+        <!-- <tabbar-item replace to="/expert_prescription" v-if="curRole == 1">
             <span>农事方案</span>
             <template #icon="props">
                 <img
@@ -81,8 +81,8 @@
                     "
                 />
             </template>
-        </tabbar-item>
-        <tabbar-item replace to="/agri_services" v-if="curRole == 0">
+        </tabbar-item> -->
+        <!-- <tabbar-item replace to="/agri_services" v-if="curRole == 0">
             <span>农事服务</span>
             <template #icon="props">
                 <img
@@ -93,8 +93,8 @@
                     "
                 />
             </template>
-        </tabbar-item>
-        <tabbar-item replace to="/user" v-if="curRole != 0">
+        </tabbar-item> -->
+        <tabbar-item replace to="/user">
             <span>用户管理</span>
             <template #icon="props">
                 <img

+ 5 - 0
src/api/modules/mine.js

@@ -44,4 +44,9 @@ module.exports = {
         url: config.base_dev_url + "z_agricultural_store_manager/batchUpdateRole",
         type: "post",
     },
+    //邀请成员加入农资店
+    inviteManager: {
+        url: config.base_dev_url + "z_agricultural_store_manager/invite",
+        type: "post",
+    },
 }

+ 6 - 0
src/router/globalRoutes.js

@@ -260,6 +260,12 @@ export default [
         },
         component: () => import("@/views/old_mini/mine/pages/register.vue"),
     },
+    //个人信息填写页面
+    {
+        path: "/user_info",
+        name: "UserInfo",
+        component: () => import("@/views/old_mini/mine/pages/userInfo.vue"),
+    },
     // 农事规划
     {
         path: "/plan",

+ 1 - 1
src/views/old_mini/home/index.vue

@@ -20,7 +20,7 @@
             <div class="farm-monitor-left" @click="handleCardClick(monitorCards.left)">
                 <div class="title">
                     <span>{{ monitorCards.left.title }}</span>
-                    <el-icon class="icon"><ArrowRightBold /></el-icon>
+                    <el-icon class="icon" v-if="monitorCards.left.title !== '农情采集'"><ArrowRightBold /></el-icon>
                 </div>
                 <div class="content">{{ monitorCards.left.content }}</div>
                 <div class="arrow">

+ 149 - 102
src/views/old_mini/mine/index.vue

@@ -125,112 +125,159 @@ const onSelect = async (item) => {
 };
 
 onActivated(() => {
-    if (curRole.value === 0) {
-        gridItems.value = [
-            {
-                title: "我的农场",
-                desc: "查看农场列表",
-                path: "/my_farm",
-            },
-            {
-                title: "我的消息",
-                desc: "查看未读信息",
-                path: "/message",
-            },
-            {
-                title: "农事记录",
-                desc: "查看历史农事",
-                path: "/farm_records",
-            },
-        ];
-    } else if (curRole.value === 1) {
-        gridItems.value = [
-            {
-                title: "我的主页",
-                desc: "查看农场列表",
-                path: "/expert_detail",
-            },
-            {
-                title: "我的报价",
-                desc: "查看未读信息",
-                path: "/message",
-            },
-            {
-                title: "信息化档案",
-                desc: "查看历史农事",
-                path: "/archives",
-            },
-        ];
-    } else if (curRole.value === 2) {
-        gridItems.value = [
-            {
-                title: "我的主页",
-                desc: "查看农场列表",
-                path: "/my_farm",
-            },
-            {
-                title: "我的消息",
-                desc: "查看未读信息",
-                path: "/message",
-            },
-            {
-                title: "信息化档案",
-                desc: "查看历史农事",
-                path: "/archives",
-            },
-        ];
-    }
+    // if (curRole.value === 0) {
+    //     gridItems.value = [
+    //         {
+    //             title: "我的农场",
+    //             desc: "查看农场列表",
+    //             path: "/my_farm",
+    //         },
+    //         {
+    //             title: "我的消息",
+    //             desc: "查看未读信息",
+    //             path: "/message",
+    //         },
+    //         {
+    //             title: "农事记录",
+    //             desc: "查看历史农事",
+    //             path: "/farm_records",
+    //         },
+    //     ];
+    // } else if (curRole.value === 1) {
+    //     gridItems.value = [
+    //         {
+    //             title: "我的主页",
+    //             desc: "查看农场列表",
+    //             path: "/expert_detail",
+    //         },
+    //         {
+    //             title: "我的报价",
+    //             desc: "查看未读信息",
+    //             path: "/message",
+    //         },
+    //         {
+    //             title: "信息化档案",
+    //             desc: "查看历史农事",
+    //             path: "/archives",
+    //         },
+    //     ];
+    // } else if (curRole.value === 2) {
+    //     gridItems.value = [
+    //         {
+    //             title: "我的主页",
+    //             desc: "查看农场列表",
+    //             path: "/my_farm",
+    //         },
+    //         {
+    //             title: "我的消息",
+    //             desc: "查看未读信息",
+    //             path: "/message",
+    //         },
+    //         {
+    //             title: "信息化档案",
+    //             desc: "查看历史农事",
+    //             path: "/archives",
+    //         },
+    //     ];
+    // }
+    gridItems.value = [
+        {
+            title: "我的主页",
+            desc: "查看农场列表",
+            path: "/my_farm",
+        },
+        {
+            title: "我的消息",
+            desc: "查看未读信息",
+            path: "/message",
+        },
+        {
+            title: "信息化档案",
+            desc: "查看历史农事",
+            path: "/archives",
+        },
+    ];
 });
 
 // 单元格项数据 - 根据角色动态显示
 const cellItems = computed(() => {
-    if (curRole.value === 0) {
-        return [
-            {
-                title: "我的农场",
-                path: "/my_farm",
-            },
-            {
-                title: "认证农资",
-                path: "/register?identity=NZ",
-            },
-            {
-                title: "退出登录",
-                path: "/logout",
-            },
-        ];
-    } else {
-        return [
-            {
-                title: "认证农资",
-                path: "/register?identity=NZ",
-            },
-            {
-                title: "系统提醒",
-                path: "/message",
-            },
-            {
-                title: "种植方案",
-                path: "/plan?farmId=101532&pageType=plant",
-            },
-            {
-                title: "服务记录",
-                path: "/service_records",
-            },
-            {
-                title: "报价维护",
-                path: "/offer_price",
-            },
-            {
-                title: "服务维护",
-                path: "/service_manage",
-            },
-            {
-                title: "团队管理",
-                path: "/team_manage",
-            },
-        ];
-    }
+    // if (curRole.value === 0) {
+    //     return [
+    //         // {
+    //         //     title: "我的农场",
+    //         //     path: "/my_farm",
+    //         // },
+    //         {
+    //             title: "认证农资",
+    //             path: "/register?identity=NZ",
+    //         },
+    //         // {
+    //         //     title: "退出登录",
+    //         //     path: "/logout",
+    //         // },
+    //     ];
+    // } else {
+    //     return [
+    //         {
+    //             title: "认证农资",
+    //             path: "/register?identity=NZ",
+    //         },
+    //         {
+    //             title: "系统提醒",
+    //             path: "/message",
+    //         },
+    //         {
+    //             title: "种植方案",
+    //             path: "/plan?farmId=101532&pageType=plant",
+    //         },
+    //         {
+    //             title: "服务记录",
+    //             path: "/service_records",
+    //         },
+    //         {
+    //             title: "报价维护",
+    //             path: "/offer_price",
+    //         },
+    //         {
+    //             title: "服务维护",
+    //             path: "/service_manage",
+    //         },
+    //         {
+    //             title: "团队管理",
+    //             path: "/team_manage",
+    //         },
+    //     ];
+    // }
+    return [
+        {
+            title: "认证农资",
+            path: "/register?identity=NZ",
+        },
+        {
+            title: "系统提醒",
+            path: "/message",
+        },
+        {
+            title: "种植方案",
+            path: "/plan?farmId=101532&pageType=plant",
+        },
+        {
+            title: "服务记录",
+            path: "/service_records",
+        },
+        {
+            title: "报价维护",
+            path: "/offer_price",
+        },
+        {
+            title: "服务维护",
+            path: "/service_manage",
+        },
+        {
+            title: "团队管理",
+            path: "/team_manage",
+        },
+    ];
 });
 
 // 花园信息项数据

+ 124 - 25
src/views/old_mini/mine/pages/teamManage.vue

@@ -3,7 +3,7 @@
         <custom-header :name="route.query.add ? '选择团队成员' : '团队管理'"></custom-header>
         <div class="team-content">
             <div class="team-title" v-show="!route.query.add">当前团队总人数({{ teamList.length || 0 }}人)</div>
-            <div class="team-list">
+            <div class="team-list" v-if="teamList && teamList.length">
                 <div class="list-item" v-for="ele in teamList" :key="ele.id">
                     <Checkbox v-if="route.query.add" @change="changeCheck" v-model="ele.checked"></Checkbox>
                     <farm-info-card
@@ -15,6 +15,7 @@
                             roleName: ele.role == 1 ? '超级管理员' : ele.role == 2 ? '项目管理员' : '普通成员',
                             className: ele.role == 1 ? 'tag-role' : ele.role == 2 ? '' : 'tag-gray',
                             maxWidth: 'auto',
+                            address: ele.role == 1 ? ele.store?.address || '--' : null,
                         }"
                     >
                         <template #right v-if="ele.role === 2 && !route.query.add">
@@ -23,6 +24,9 @@
                     </farm-info-card>
                 </div>
             </div>
+            <div v-else class="empty-wrap">
+                <div class="empty-text">暂无数据</div>
+            </div>
         </div>
         <div class="custom-bottom-fixed-btns">
             <div class="bottom-btn secondary-btn" @click="handleSetAdmin">
@@ -43,7 +47,7 @@
             @closed="handlePopupClosed"
         >
             <div class="popup-content">
-                <div class="popup-title">新增团队成员</div>
+                <div class="popup-title">{{ detailType === "add" ? "新增团队成员" : "成员信息" }}</div>
                 <el-form
                     ref="formRef"
                     :model="formData"
@@ -53,10 +57,21 @@
                     size="large"
                 >
                     <el-form-item label="姓名" prop="name">
-                        <el-input v-model="formData.name" placeholder="请输入姓名" clearable />
+                        <el-input
+                            v-model="formData.name"
+                            placeholder="请输入姓名"
+                            clearable
+                            :readonly="detailType === 'detail'"
+                        />
                     </el-form-item>
                     <el-form-item label="手机号" prop="phone">
-                        <el-input v-model="formData.phone" placeholder="请输入手机号" clearable maxlength="11" />
+                        <el-input
+                            v-model="formData.phone"
+                            placeholder="请输入手机号"
+                            clearable
+                            maxlength="11"
+                            :readonly="detailType === 'detail'"
+                        />
                     </el-form-item>
                     <el-form-item label="角色类型" prop="duties">
                         <div class="role-type-grid">
@@ -64,7 +79,10 @@
                                 v-for="role in dutyList"
                                 :key="role.code"
                                 class="role-btn"
-                                :class="{ active: formData.duties.includes(role.code) }"
+                                :class="{
+                                    active: formData.duties.includes(role.code),
+                                    readonly: detailType === 'detail',
+                                }"
                                 @click="toggleRole(role.code)"
                             >
                                 {{ role.name }}
@@ -72,10 +90,13 @@
                         </div>
                     </el-form-item>
                 </el-form>
-                <div class="popup-footer">
+                <div class="popup-footer" v-show="detailType === 'add'">
                     <div class="footer-btn share-btn" @click="handleShare">分享微信好友</div>
                     <div class="footer-btn confirm-btn" @click="handleConfirm">确认添加</div>
                 </div>
+                <div class="popup-footer" v-show="detailType === 'detail'">
+                    <div class="footer-btn cancel-admin-btn" @click="handleDelete">删除成员</div>
+                </div>
             </div>
         </Popup>
 
@@ -102,7 +123,9 @@
                     </div>
                 </div>
                 <div class="popup-footer">
-                    <div class="footer-btn cancel-admin-btn" @click="handleCancelAdmin">取消管理权限</div>
+                    <div class="footer-btn cancel-admin-btn" @click="handleCancelAdmin">
+                        {{ route.query.add ? "取消" : "取消管理权限" }}
+                    </div>
                     <div class="footer-btn confirm-btn" @click="handleConfirmPermission">确认设置</div>
                 </div>
             </div>
@@ -115,7 +138,8 @@ import customHeader from "@/components/customHeader.vue";
 import { ref, reactive, onMounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { Popup, Checkbox } from "vant";
-import { ElMessage,ElMessageBox } from "element-plus";
+import wx from "weixin-js-sdk";
+import { ElMessage, ElMessageBox } from "element-plus";
 import FarmInfoCard from "@/components/pageComponents/FarmInfoCard.vue";
 
 const router = useRouter();
@@ -291,22 +315,28 @@ const rules = reactive({
 
 // 取消管理员
 const handleCancelAdmin = async () => {
-    ElMessageBox.confirm('确定取消管理员权限吗?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
+    if (route.query.add) {
+        showPermissionPopup.value = false;
+        return;
+    }
+    ElMessageBox.confirm("确定取消管理员权限吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
         zIndex: 3000,
-        type: 'warning',
-    }).then(async () => {
-        const { code, msg } = await VE_API.mine.saveManager({ id: currentPermissionItem.value.id, role: 3 });
-        if (code === 0) {
-            ElMessage.success("取消管理员权限成功");
-            teamList.value = []
-            getManagerList();
-            showPermissionPopup.value = false;
-        } else {
-            ElMessage.error(msg);
-        }
-    }).catch(() => {});
+        type: "warning",
+    })
+        .then(async () => {
+            const { code, msg } = await VE_API.mine.saveManager({ id: currentPermissionItem.value.id, role: 3 });
+            if (code === 0) {
+                ElMessage.success("取消管理员权限成功");
+                teamList.value = [];
+                getManagerList();
+                showPermissionPopup.value = false;
+            } else {
+                ElMessage.error(msg);
+            }
+        })
+        .catch(() => {});
 };
 
 // 弹窗关闭处理
@@ -325,8 +355,20 @@ const handlePopupClosed = () => {
 
 // 分享微信好友
 const handleShare = () => {
-    ElMessage.info("分享功能待实现");
-    // TODO: 实现分享到微信好友的功能
+    const query = {
+        askInfo: { title: "分享团队", content: "是否邀请好友加入团队" },
+        shareText: "邀请您加入我的团队,快来查看吧~",
+        // farmId: 766,
+        targetUrl: `user_info`,
+        // goBack: true,
+        paramsPage: JSON.stringify({
+            storeId: teamList.value[0]?.storeId || '',
+        }),
+        imageUrl: "https://birdseye-img.sysuimars.com/birdseye-look-mini/invite_bg.png",
+    };
+    wx.miniProgram.navigateTo({
+        url: `/pages/subPages/share_page/index?pageParams=${JSON.stringify(query)}&type=sharePage`,
+    });
 };
 
 // 确认添加
@@ -359,7 +401,11 @@ const handleAddTeamMember = async () => {
             return;
         }
     } else {
+        detailType.value = "add";
         showAddMemberPopup.value = true;
+        formData.name = "";
+        formData.phone = "";
+        formData.duties = [];
     }
 };
 
@@ -374,11 +420,53 @@ const handleSetAdmin = () => {
     }
 };
 
+const detailType = ref("add");
 const handleItem = (item) => {
     if (route.query.add) {
         item.checked = !item.checked;
+    } else {
+        if (item.role == 1) {
+            ElMessage.warning("超级管理员无法删除");
+            return;
+        }
+        detailType.value = "detail";
+        showAddMemberPopup.value = true;
+        // 记录当前选中的成员,后续删除时使用
+        currentPermissionItem.value = item;
+        // 回填已知字段
+        formData.name = item.name || "";
+        formData.phone = item.phone || "";
+        if (Array.isArray(item.dutyEnumList)) {
+            formData.duties = [...item.dutyEnumList];
+        }
     }
 };
+
+const handleDelete = () => {
+    ElMessageBox.confirm("确定删除该成员吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        zIndex: 3000,
+        type: "warning",
+    })
+        .then(async () => {
+            try {
+                const { code, msg } = await VE_API.mine.deleteManager({
+                    id: currentPermissionItem.value.id,
+                });
+                if (code === 0) {
+                    ElMessage.success("删除成功");
+                    showAddMemberPopup.value = false;
+                    await getManagerList();
+                } else {
+                    ElMessage.error(msg || "删除失败");
+                }
+            } catch (error) {
+                ElMessage.error("删除失败,请稍后重试");
+            }
+        })
+        .catch(() => {});
+};
 </script>
 
 <style lang="scss" scoped>
@@ -407,6 +495,14 @@ const handleItem = (item) => {
                 margin-top: 10px;
             }
         }
+        .empty-wrap {
+            padding-top: 40px;
+            text-align: center;
+            .empty-text {
+                font-size: 14px;
+                color: #86909c;
+            }
+        }
     }
 }
 
@@ -465,6 +561,9 @@ const handleItem = (item) => {
                     color: #ffffff;
                     border-color: #2199f8;
                 }
+                &.readonly {
+                    pointer-events: none;
+                }
             }
 
             &.permission-list {

+ 233 - 0
src/views/old_mini/mine/pages/userInfo.vue

@@ -0,0 +1,233 @@
+<template>
+    <div class="user-info-page">
+        <custom-header name="个人信息填写" :isClose="true"></custom-header>
+        <div class="form-content">
+            <el-form
+                ref="formRef"
+                :model="formData"
+                :rules="rules"
+                label-position="top"
+                class="user-form"
+                size="large"
+            >
+                <el-form-item label="姓名" prop="name">
+                    <el-input v-model="formData.name" placeholder="请输入姓名" clearable />
+                </el-form-item>
+                <el-form-item label="手机号" prop="phone">
+                    <el-input
+                        v-model="formData.phone"
+                        placeholder="请输入手机号"
+                        clearable
+                        maxlength="11"
+                    />
+                </el-form-item>
+                <el-form-item label="角色类型" prop="roleType">
+                    <div class="role-type-grid">
+                        <div
+                            v-for="role in roleList"
+                            :key="role.code"
+                            class="role-btn"
+                            :class="{ active: formData.roleType.includes(role.code) }"
+                            @click="selectRole(role.code)"
+                        >
+                            {{ role.name }}
+                        </div>
+                    </div>
+                </el-form-item>
+            </el-form>
+        </div>
+        <div class="custom-bottom-fixed-btns">
+            <div class="bottom-btn primary-btn" @click="handleConfirm">确认加入</div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import customHeader from "@/components/customHeader.vue";
+import { ref, reactive, onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { ElMessage } from "element-plus";
+
+const router = useRouter();
+const route = useRoute();
+const formRef = ref(null);
+
+// 表单数据
+const formData = reactive({
+    name: "",
+    phone: "",
+    roleType: [],
+});
+
+// 角色列表
+const roleList = ref([]);
+//获取角色列表
+const getRoleList = async () => {
+    const { data } = await VE_API.mine.listDutyList();
+    if (data && data.length > 0) {
+        roleList.value = data;
+        // 默认选中第一个角色
+        formData.roleType = [data[0].code];
+    }
+};
+
+// 表单验证规则
+const rules = reactive({
+    name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
+    phone: [
+        { required: true, message: "请输入手机号", trigger: "blur" },
+        {
+            pattern: /^1[3-9]\d{9}$/,
+            message: "请输入正确的手机号码",
+            trigger: ["blur", "change"],
+        },
+    ],
+    roleType: [
+        {
+            validator: (_, value, callback) => {
+                if (Array.isArray(value) && value.length > 0) {
+                    callback();
+                } else {
+                    callback(new Error("请选择角色类型"));
+                }
+            },
+            trigger: "change",
+        },
+    ],
+});
+
+// 选择角色(多选)
+const selectRole = (value) => {
+    const idx = formData.roleType.indexOf(value);
+    if (idx > -1) {
+        // 已选中则取消选择
+        formData.roleType.splice(idx, 1);
+    } else {
+        formData.roleType.push(value);
+    }
+};
+
+const storeId = ref(null);
+// 确认加入
+const handleConfirm = () => {
+    if (!formRef.value) return;
+    formRef.value.validate(async (valid) => {
+        if (valid) {
+            const { code, msg } = await VE_API.mine.inviteManager({ ...formData, role: 3, storeId: storeId.value,miniUserId: localStorage.getItem("MINI_USER_ID")});
+            if (code === 0) {
+                ElMessage.success("加入成功");
+                setTimeout(() => {
+                    router.replace('/home');
+                }, 2000);
+            } else {
+                ElMessage.error(msg);
+            }
+        } else {
+            // 校验失败,Element Plus 会自动显示错误信息
+            return false;
+        }
+    });
+};
+
+onMounted(() => {
+    getRoleList();
+    if (route.query.miniJson) {
+        const data = JSON.parse(route.query.miniJson);
+        storeId.value = JSON.parse(data.paramsPage).storeId;
+    }
+});
+</script>
+
+<style lang="scss" scoped>
+.user-info-page {
+    width: 100%;
+    min-height: 100vh;
+    background: #f5f5f5;
+    padding-bottom: 80px;
+
+    .form-content {
+        padding: 20px 12px;
+        background: #fff;
+        margin: 12px;
+        border-radius: 12px;
+
+        .user-form {
+            ::v-deep {
+                .el-form-item {
+                    margin-bottom: 24px;
+
+                    &:last-child {
+                        margin-bottom: 0;
+                    }
+
+                    .el-form-item__label {
+                        font-size: 14px;
+                        color: #1d2129;
+                        font-weight: 500;
+                        padding-bottom: 8px;
+                    }
+
+                    .el-input__wrapper {
+                        border-radius: 8px;
+                        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset;
+                        background: #fff;
+
+                        &:hover {
+                            box-shadow: 0 0 0 1px rgba(33, 153, 248, 0.5) inset;
+                        }
+
+                        &.is-focus {
+                            box-shadow: 0 0 0 1px #2199f8 inset;
+                        }
+
+                        .el-input__inner {
+                            color: #1d2129;
+                            font-size: 14px;
+
+                            &::placeholder {
+                                color: #86909c;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        .role-type-grid {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            width: 100%;
+            .role-btn {
+                width: calc(50% - 10px);
+                text-align: center;
+                border-radius: 8px;
+                font-size: 14px;
+                color: #86909c;
+                background: #fff;
+                border: 1px solid rgba(153, 153, 153, 0.3);
+                padding: 4px 0;
+                &.active {
+                    background: #2199f8;
+                    color: #fff;
+                    border-color: #2199f8;
+                }
+            }
+        }
+    }
+}
+
+.custom-bottom-fixed-btns {
+    .bottom-btn {
+        width: 100%;
+        padding: 13px 0;
+        font-size: 16px;
+
+        &.primary-btn {
+            background: #2199f8;
+            color: #fff;
+        }
+    }
+}
+</style>
+