代码优化

linwe

2024-07-03 6155669d6cecdff465688ec86bc69453b7896b2c

代码优化

 src/store/modules/user.js

@@ -4,10 +4,21 @@
  removeToken,
  removeRefreshToken,
} from "@/util/auth";
import { Alert, Message } from "element-ui";
import { setStore, getStore } from "@/util/store";
import { isURL, validatenull } from "@/util/validate";
import { deepClone } from "@/util/util";
import {
  Alert,
  Message
} from "element-ui";
import {
  setStore,
  getStore
} from "@/util/store";
import {
  isURL,
  validatenull
} from "@/util/validate";
import {
  deepClone
} from "@/util/util";
import website from "@/config/website";
import {
  loginByUsername,
@@ -18,7 +29,10 @@
  refreshToken,
  getButtons,
} from "@/api/user";
import { getTopMenu, getRoutes } from "@/api/system/menu";
import {
  getTopMenu,
  getRoutes
} from "@/api/system/menu";
import md5 from "js-md5";

function findChildrenUrl(data) {
@@ -58,32 +72,53 @@

const user = {
  state: {
    tenantId: getStore({ name: "tenantId" }) || "",
    userInfo: getStore({ name: "userInfo" }) || [],
    permission: getStore({ name: "permission" }) || {},
    tenantId: getStore({
      name: "tenantId"
    }) || "",
    userInfo: getStore({
      name: "userInfo"
    }) || [],
    permission: getStore({
      name: "permission"
    }) || {},
    roles: [],
    menuId: {},
    menu: getStore({ name: "menu" }) || [],
    menuAll: getStore({ name: "menuAll" }) || [],
    token: getStore({ name: "token" }) || "",
    refreshToken: getStore({ name: "refreshToken" }) || "",
    homeFirstPage: getStore({ name: "firstPage" }) || "",
    homeFirstTagPage: getStore({ name: "firstTagPage" }) || {},
    menu: getStore({
      name: "menu"
    }) || [],
    menuAll: getStore({
      name: "menuAll"
    }) || [],
    token: getStore({
      name: "token"
    }) || "",
    refreshToken: getStore({
      name: "refreshToken"
    }) || "",
    homeFirstPage: getStore({
      name: "firstPage"
    }) || "",
    homeFirstTagPage: getStore({
      name: "firstTagPage"
    }) || {},
  },
  actions: {
    //根据用户名登录
    LoginByUsername({ dispatch, commit }, userInfo) {
    LoginByUsername({
      dispatch,
      commit
    }, userInfo) {
      return new Promise((resolve, reject) => {
        loginByUsername(
          userInfo.tenantId,
          userInfo.deptId,
          userInfo.roleId,
          userInfo.username,
          md5(userInfo.password),
          userInfo.type,
          userInfo.key,
          userInfo.code
        )
            userInfo.tenantId,
            userInfo.deptId,
            userInfo.roleId,
            userInfo.username,
            md5(userInfo.password),
            userInfo.type,
            userInfo.key,
            userInfo.code
          )
          .then((res) => {
            const data = res.data;
            if (data.error_description) {
@@ -91,7 +126,9 @@
                message: data.error_description,
                type: "error",
              });
              resolve({ error: "error" });
              resolve({
                error: "error"
              });
            } else {
              commit("SET_TOKEN", data.access_token);
              commit("SET_REFRESH_TOKEN", data.refresh_token);
@@ -107,9 +144,13 @@
                  findChildrenRole(data.role_name, "administrator") ||
                  findChildrenRole(data.role_name, "gagly") ||
                  findChildrenRole(data.role_name, "jdgly") ||
                  findChildrenRole(data.role_name, "sqgly")
                  findChildrenRole(data.role_name, "sqgly") ||
                  findChildrenRole(data.role_name, "mj")
                ) {
                  setStore({ name: "showMenu", content: true });
                  setStore({
                    name: "showMenu",
                    content: true
                  });

                  commit("SET_HOMEFIRSTTAGPAGE", {
                    label: "首页",
@@ -132,7 +173,10 @@
                    menuData,
                  });
                } else {
                  setStore({ name: "showMenu", content: false });
                  setStore({
                    name: "showMenu",
                    content: false
                  });

                  commit("SET_HOMEFIRSTTAGPAGE", {
                    label: fistMenu.name,
@@ -148,7 +192,10 @@

                  commit("SET_HOMEFIRSTPAGE", fistMenu.path);

                  resolve({ fistMenu, menuData });
                  resolve({
                    fistMenu,
                    menuData
                  });
                }

                commit("DEL_ALL_TAG");
@@ -161,7 +208,9 @@
      });
    },
    //根据手机号登录
    LoginByPhone({ commit }, userInfo) {
    LoginByPhone({
      commit
    }, userInfo) {
      return new Promise((resolve) => {
        loginByUsername(userInfo.phone, userInfo.code).then((res) => {
          const data = res.data.data;
@@ -173,7 +222,9 @@
      });
    },
    //根据第三方信息登录
    LoginBySocial({ commit }, userInfo) {
    LoginBySocial({
      commit
    }, userInfo) {
      return new Promise((resolve) => {
        loginBySocial(
          userInfo.tenantId,
@@ -200,7 +251,9 @@
      });
    },
    //根据单点信息登录
    LoginBySso({ commit }, userInfo) {
    LoginBySso({
      commit
    }, userInfo) {
      return new Promise((resolve) => {
        loginBySso(userInfo.state, userInfo.code).then((res) => {
          const data = res.data;
@@ -222,7 +275,9 @@
      });
    },
    //获取用户信息
    GetUserInfo({ commit }) {
    GetUserInfo({
      commit
    }) {
      return new Promise((resolve, reject) => {
        getUserInfo()
          .then((res) => {
@@ -236,14 +291,17 @@
      });
    },
    //刷新token
    refreshToken({ state, commit }, userInfo) {
    refreshToken({
      state,
      commit
    }, userInfo) {
      return new Promise((resolve, reject) => {
        refreshToken(
          state.refreshToken,
          state.tenantId,
          !validatenull(userInfo) ? userInfo.deptId : state.userInfo.dept_id,
          !validatenull(userInfo) ? userInfo.roleId : state.userInfo.role_id
        )
            state.refreshToken,
            state.tenantId,
            !validatenull(userInfo) ? userInfo.deptId : state.userInfo.dept_id,
            !validatenull(userInfo) ? userInfo.roleId : state.userInfo.role_id
          )
          .then((res) => {
            const data = res.data;
            commit("SET_TOKEN", data.access_token);
@@ -257,7 +315,9 @@
      });
    },
    // 登出
    LogOut({ commit }) {
    LogOut({
      commit
    }) {
      return new Promise((resolve, reject) => {
        logout()
          .then(() => {
@@ -279,7 +339,9 @@
      });
    },
    //注销session
    FedLogOut({ commit }) {
    FedLogOut({
      commit
    }) {
      return new Promise((resolve) => {
        commit("SET_TOKEN", "");
        commit("SET_MENU_ALL_NULL", []);
@@ -304,7 +366,10 @@
      });
    },
    //获取系统菜单
    GetMenu({ commit, dispatch }, topMenuId) {
    GetMenu({
      commit,
      dispatch
    }, topMenuId) {
      return new Promise((resolve) => {
        getRoutes(topMenuId).then((res) => {
          const data = res.data.data;
@@ -320,7 +385,9 @@
      });
    },
    //获取系统按钮
    GetButtons({ commit }) {
    GetButtons({
      commit
    }) {
      return new Promise((resolve) => {
        getButtons().then((res) => {
          const data = res.data.data;
@@ -332,7 +399,10 @@
  },
  mutations: {
    SET_HOMEFIRSTPAGE: (state, homeFirstPage) => {
      setStore({ name: "firstPage", content: homeFirstPage });
      setStore({
        name: "firstPage",
        content: homeFirstPage
      });
      state.homeFirstPage = homeFirstPage;
    },
    SET_HOMEFIRSTTAGPAGE: (state, homeFirstTagPage) => {
@@ -345,7 +415,10 @@
    SET_TOKEN: (state, token) => {
      setToken(token);
      state.token = token;
      setStore({ name: "token", content: state.token });
      setStore({
        name: "token",
        content: state.token
      });
    },
    SET_MENU_ID(state, menuId) {
      state.menuId = menuId;
@@ -362,31 +435,49 @@
        }
      });
      state.menuAll = menu;
      setStore({ name: "menuAll", content: state.menuAll });
      setStore({
        name: "menuAll",
        content: state.menuAll
      });
    },
    SET_MENU_ALL_NULL: (state) => {
      state.menuAll = [];
      setStore({ name: "menuAll", content: state.menuAll });
      setStore({
        name: "menuAll",
        content: state.menuAll
      });
    },
    SET_MENU: (state, menu) => {
      state.menu = menu;
      setStore({ name: "menu", content: state.menu });
      setStore({
        name: "menu",
        content: state.menu
      });
    },
    SET_REFRESH_TOKEN: (state, refreshToken) => {
      setRefreshToken(refreshToken);
      state.refreshToken = refreshToken;
      setStore({ name: "refreshToken", content: state.refreshToken });
      setStore({
        name: "refreshToken",
        content: state.refreshToken
      });
    },
    SET_TENANT_ID: (state, tenantId) => {
      state.tenantId = tenantId;
      setStore({ name: "tenantId", content: state.tenantId });
      setStore({
        name: "tenantId",
        content: state.tenantId
      });
    },
    SET_USER_INFO: (state, userInfo) => {
      if (validatenull(userInfo.avatar)) {
        userInfo.avatar = "/img/bg/img-logo.png";
      }
      state.userInfo = userInfo;
      setStore({ name: "userInfo", content: state.userInfo });
      setStore({
        name: "userInfo",
        content: state.userInfo
      });
    },
    SET_ROLES: (state, roles) => {
      state.roles = roles;
@@ -413,8 +504,11 @@
      result.forEach((ele) => {
        state.permission[ele] = true;
      });
      setStore({ name: "permission", content: state.permission });
      setStore({
        name: "permission",
        content: state.permission
      });
    },
  },
};
export default user;
export default user;

 src/views/cGovernance/taskECallTwo/index.vue

@@ -808,9 +808,9 @@
          this.selectionClear()
        })

        synchronizeData().then((res) => {
        // synchronizeData().then((res) => {

        })
        // })
      }
    },
  }

 src/views/place/components/baseAllInfo.vue

@@ -1122,12 +1122,12 @@
                    that.placeElement.page,
                    that.placeElement.query
                  )

                  done()
                })
              )
          } else {
            console.log("error submit!!")
            that.disabled = false;
            return false
          }
        })

 src/views/publicSecurity/components/auditBase.vue

@@ -101,11 +101,20 @@
        this.getPlaceAddressListRequest(query)
      },
      getPlaceAddressListRequest(query) {
        getList(1, 10, {
          neiName: query
        }).then(res => {
          this.standardAddressList = res.data.data.records;
        })
        // 场所名称查询
        if (this.type == 2) {
          getList(1, 10, {
            placeName: query
          }).then(res => {
            this.standardAddressList = res.data.data.records;
          })
        } else {
          getList(1, 10, {
            neiName: query
          }).then(res => {
            this.standardAddressList = res.data.data.records;
          })
        }
      },

      handleSubmit(status) {

 src/views/publicSecurity/ninePlaceManage/situationRectification.vue

@@ -199,6 +199,26 @@
          columnBtn: false,
          dialogClickModal: false,
          column: [{
              width: 110,
              span: 12,
              label: "街道名称",
              prop: "streetName",
              searchSpan: 4,
              searchLabelWidth: 100,
              search: true,
              align: 'center',
              labelWidth: 110,
            }, {
              width: 110,
              span: 12,
              label: "社区名称",
              prop: "communityName",
              searchSpan: 4,
              searchLabelWidth: 100,
              search: true,
              align: 'center',
              labelWidth: 110,
            }, {
              label: "场所名称",
              prop: "placeName",
              align: 'center',
@@ -908,4 +928,4 @@
      margin-bottom: 20px;
    }
  }
</style>
</style>

 src/views/publicSecurity/positionManage/TransactRegist.vue

@@ -161,6 +161,26 @@
          column: [{
              width: 110,
              span: 12,
              label: "街道名称",
              prop: "streetName",
              searchSpan: 4,
              searchLabelWidth: 100,
              search: true,
              align: 'center',
              labelWidth: 110,
            }, {
              width: 110,
              span: 12,
              label: "社区名称",
              prop: "communityName",
              searchSpan: 4,
              searchLabelWidth: 100,
              search: true,
              align: 'center',
              labelWidth: 110,
            }, {
              width: 110,
              span: 12,
              label: "场所名称",
              prop: "districtName",
              searchSpan: 4,
@@ -199,7 +219,7 @@
              align: 'center',
              width: 120,
              labelWidth: 110,
              dataType:"number"
              dataType: "number"
            },
            {
              width: 110,
@@ -312,7 +332,7 @@
              prop: "communityName",
              align: 'center',
              labelWidth: 110,
              row:true,
              row: true,
            },
            {
              width: 100,

 src/views/wel/index.vue

@@ -1,175 +1,186 @@
<template>
    <div id="homeL">
        <div class="homeL-up">
            <span class="h1">{{ webTitle }}</span>
            <span class="h2"></span>
        </div>
        <div class="homeL-bar" v-if="homeMenuData.length">
            <div class="outS" v-for="(item, index) in homeMenuData" :key="index" @click="openMenu(item, item.newOpen)">
                <div :style="{ backgroundImage: `url(${publicPath + item.imageUrl})` }"><span>{{ item.title }}</span>
                </div>
            </div>
        </div>
  <div id="homeL">
    <div class="homeL-up">
      <span class="h1">{{ webTitle }}</span>
      <span class="h2"></span>
    </div>
    <div class="homeL-bar" v-if="homeMenuData.length">
      <div class="outS" v-for="(item, index) in homeMenuData" :key="index" @click="openMenu(item, item.newOpen)">
        <div :style="{ backgroundImage: `url(${publicPath + item.imageUrl})` }"><span>{{ item.title }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getToken } from '@/util/auth'
import { getStore } from "@/util/store"
  import {
    getToken
  } from '@/util/auth'
  import {
    getStore
  } from "@/util/store"

export default {
    data () {
        return {
            webTitle: getStore({ name: "webTitle" }),
            webType: getStore({ name: "webType" }),
            a: 1,
            globalUserInfo: getStore({ name: "userInfo" }),
  export default {
    data() {
      return {
        webTitle: getStore({
          name: "webTitle"
        }),
        webType: getStore({
          name: "webType"
        }),
        a: 1,
        globalUserInfo: getStore({
          name: "userInfo"
        }),

            publicPath: process.env.BASE_URL,
            homeMenuData: []
        }
        publicPath: process.env.BASE_URL,
        homeMenuData: []
      }
    },

    created () {
        if (this.webType == 'secend') {
            // 住建局
            // if (this.globalUserInfo.role_name == 'zjj') {
            //     this.homeMenuData = [
            //         {
            //             imageUrl: 'img/yijianbaoj.png',
            //             url: '/propertySupervision/residentSupervision',
            //             title: '居民监管',
            //             newOpen: false,
            //         },
            //         {
            //             imageUrl: 'img/yijianbaoj.png',
            //             url: '/propertySupervision/houseHoldSupervision',
            //             title: '住房监管',
            //             newOpen: false,
            //         },
            //         {
            //             imageUrl: 'img/yijianbaoj.png',
            //             url: '/propertySupervision/ownersCommittee',
            //             title: '业主大会',
            //             newOpen: false,
            //         },
            //         {
            //             imageUrl: 'img/yijianbaoj.png',
            //             url: '/propertySupervision/propertyCapitalManage',
            //             title: '维修基金管理',
            //             newOpen: false,
            //         },
            //     ]
            // } else {
            //     // 物业
            //     this.homeMenuData = [
            //         {
            //             imageUrl: 'img/yijianbaoj.png',
            //             url: '/userHouse/houseHoldList',
            //             title: '住户管理',
            //             newOpen: false,
            //         },
            //     ]
            // }
        } else {
            this.homeMenuData = [
                {
                    imageUrl: 'img/yijianbaoj.png',
                    url: '/userHouse/houseHoldList',
                    title: '住户管理',
                    newOpen: false,
                },
                {
                    imageUrl: 'img/fangyi.png',
                    url: '/userHouse/houseList',
                    title: '房屋管理',
                    newOpen: false,
                },
                {
                    imageUrl: 'img/anjian.png',
                    url: '/cGovernance/taskECall',
                    title: 'E呼即办',
                    newOpen: false,
                },
                {
                    imageUrl: 'img/tiwen.png',
                    url: '/cGovernance/reportForRepairs',
                    title: '报事报修',
                    newOpen: false,
                },
                {
                    imageUrl: 'img/tongji.png',
                    url: '/cGovernance/gridWorkLog',
                    title: '走访日志',
                    newOpen: false,
                }
            ]
    created() {
      if (this.webType == 'secend') {
        // 住建局
        // if (this.globalUserInfo.role_name == 'zjj') {
        //     this.homeMenuData = [
        //         {
        //             imageUrl: 'img/yijianbaoj.png',
        //             url: '/propertySupervision/residentSupervision',
        //             title: '居民监管',
        //             newOpen: false,
        //         },
        //         {
        //             imageUrl: 'img/yijianbaoj.png',
        //             url: '/propertySupervision/houseHoldSupervision',
        //             title: '住房监管',
        //             newOpen: false,
        //         },
        //         {
        //             imageUrl: 'img/yijianbaoj.png',
        //             url: '/propertySupervision/ownersCommittee',
        //             title: '业主大会',
        //             newOpen: false,
        //         },
        //         {
        //             imageUrl: 'img/yijianbaoj.png',
        //             url: '/propertySupervision/propertyCapitalManage',
        //             title: '维修基金管理',
        //             newOpen: false,
        //         },
        //     ]
        // } else {
        //     // 物业
        //     this.homeMenuData = [
        //         {
        //             imageUrl: 'img/yijianbaoj.png',
        //             url: '/userHouse/houseHoldList',
        //             title: '住户管理',
        //             newOpen: false,
        //         },
        //     ]
        // }
      } else {
        this.homeMenuData = [{
            imageUrl: 'img/yijianbaoj.png',
            url: '/userHouse/houseHoldList',
            title: '住户管理',
            newOpen: false,
          },
          {
            imageUrl: 'img/fangyi.png',
            url: '/userHouse/houseList',
            title: '房屋管理',
            newOpen: false,
          },
          {
            imageUrl: 'img/anjian.png',
            url: '/cGovernance/taskECall',
            title: 'E呼即办',
            newOpen: false,
          },
          {
            imageUrl: 'img/tiwen.png',
            url: '/cGovernance/reportForRepairs',
            title: '报事报修',
            newOpen: false,
          },
          {
            imageUrl: 'img/tongji.png',
            url: '/cGovernance/gridWorkLog',
            title: '走访日志',
            newOpen: false,
          }
        ]

            if (this.globalUserInfo.role_name.indexOf('gagly') != -1) {
                this.homeMenuData = [
                    {
                        imageUrl: 'img/yijianbaoj.png',
                        url: '/userHouse/houseHoldList',
                        title: '住户管理',
                        newOpen: false,
                    },
                    {
                        imageUrl: 'img/fangyi.png',
                        url: '/userHouse/houseList',
                        title: '房屋管理',
                        newOpen: false,
                    },
                    {
                        imageUrl: 'img/csjc.png',
                        url: '/publicSecurity/ninePlaceManage/patrolRecord',
                        title: '场所检查',
                        newOpen: false,
                    },
                    {
                        imageUrl: 'img/dagl.png',
                        url: '/publicSecurity/ninePlaceManage/archivesManage',
                        title: '档案管理',
                        newOpen: false,
                    },
                    {
                        imageUrl: 'img/zgqk.png',
                        url: '/publicSecurity/ninePlaceManage/hiddenDangerStatistics',
                        title: '整改情况',
                        newOpen: false,
                    }
                ]
        if (this.globalUserInfo.role_name.indexOf('gagly') != -1) {
          this.homeMenuData = [{
              imageUrl: 'img/yijianbaoj.png',
              url: '/userHouse/houseHoldList',
              title: '住户管理',
              newOpen: false,
            },
            {
              imageUrl: 'img/fangyi.png',
              url: '/userHouse/houseList',
              title: '房屋管理',
              newOpen: false,
            },
            {
              imageUrl: 'img/csjc.png',
              url: '/publicSecurity/ninePlaceManage/patrolRecord',
              title: '场所检查',
              newOpen: false,
            },
            {
              imageUrl: 'img/dagl.png',
              url: '/publicSecurity/ninePlaceManage/archivesManage',
              title: '档案管理',
              newOpen: false,
            },
            {
              imageUrl: 'img/zgqk.png',
              url: '/publicSecurity/ninePlaceManage/hiddenDangerStatistics',
              title: '整改情况',
              newOpen: false,
            }

            if (this.globalUserInfo.role_name == 'administrator' ||
                this.globalUserInfo.role_name.indexOf('jdgly') != -1 ||
                this.globalUserInfo.role_name.indexOf('sqgly') != -1 ||
                this.globalUserInfo.role_name.indexOf('gagly') != -1 ||
                this.globalUserInfo.role_name.split(',').find(item => item == 'admin')) {
                this.homeMenuData.push({
                    imageUrl: 'img/jsc.png',
                    url: `http://srgdjczzxtpt.com:2181/uniform-auth/login?app=app_smart_aoi&Blade-Auth=bearer ${getToken()}`,
                    title: '驾驶舱',
                    newOpen: true,
                })
            }
          ]
        }

        if (this.globalUserInfo.role_name == 'administrator' ||
          this.globalUserInfo.role_name.indexOf('jdgly') != -1 ||
          this.globalUserInfo.role_name.indexOf('sqgly') != -1 ||
          this.globalUserInfo.role_name.indexOf('gagly') != -1 ||
          this.globalUserInfo.role_name.indexOf('mj') != -1 ||
          this.globalUserInfo.role_name.split(',').find(item => item == 'admin')) {
          this.homeMenuData.push({
            imageUrl: 'img/jsc.png',
            url: `http://srgdjczzxtpt.com:2181/uniform-auth/login?app=app_smart_aoi&Blade-Auth=bearer ${getToken()}`,
            title: '驾驶舱',
            newOpen: true,
          })
        }
      }
    },

    methods: {
        openMenu (data, flag = false) {
            if (flag) {
                window.open(data.url)
            } else {
                this.$router.push({ path: data.url })
            }
      openMenu(data, flag = false) {
        if (flag) {
          window.open(data.url)
        } else {
          this.$router.push({
            path: data.url
          })
        }
      }
    },
    mouted () { },
}
    mouted() {},
  }
</script>

<style lang="scss">
#homeL {
  #homeL {
    display: flex;
    flex-direction: column;
    width: 100%;
@@ -177,78 +188,78 @@

    //   border: 1px solid #000;
    .homeL-up {
        width: 100%;
        height: 74%;
        // border: 1px solid rgb(39, 164, 185);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background-image: url("../../../public/img/bjkeji.png");
        background-color: #fff;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        -moz-background-size: 100% 100%;
        color: #4BA3FE;
      width: 100%;
      height: 74%;
      // border: 1px solid rgb(39, 164, 185);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      background-image: url("../../../public/img/bjkeji.png");
      background-color: #fff;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      -moz-background-size: 100% 100%;
      color: #4BA3FE;

        .h1,
        .h2 {
            position: relative;
            left: 22%;
        }
      .h1,
      .h2 {
        position: relative;
        left: 22%;
      }

        .h1 {
            font-size: 54px;
        }
      .h1 {
        font-size: 54px;
      }

        .h2 {
            font-size: 28px;
        }
      .h2 {
        font-size: 28px;
      }
    }

    .homeL-bar {
        height: 0;
      height: 0;
      flex: 1;
      width: 100%;
      display: flex;
      align-items: center;

      .outS {
        width: 0;
        flex: 1;
        width: 100%;
        height: 94.6%;
        display: flex;
        align-items: center;
        justify-content: center;

        .outS {
            width: 0;
            flex: 1;
            height: 94.6%;
            display: flex;
            justify-content: center;
        &>div {
          width: 96%;
          height: 100%;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 5px;

            &>div {
                width: 96%;
                height: 100%;
                background-repeat: no-repeat;
                background-size: 100% 100%;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 5px;
          &:hover {
            width: 99%;
            height: 99%;
            transition: all 0.3s ease;
          }

                &:hover {
                    width: 99%;
                    height: 99%;
                    transition: all 0.3s ease;
                }

                span {
                    position: relative;
                    top: -30px;
                    left: -50px;
                    font-weight: 600;
                    font-size: 30px;
                    color: #fff;
                    display: inline-block;
                    // border: 1px solid rgb(180, 22, 75);
                }
            }
          span {
            position: relative;
            top: -30px;
            left: -50px;
            font-weight: 600;
            font-size: 30px;
            color: #fff;
            display: inline-block;
            // border: 1px solid rgb(180, 22, 75);
          }
        }
      }
    }
}
  }
</style>