无等级网格版组件合并

src/apps/AppGridManagement/AddUser.vue

@@ -21,7 +21,7 @@
         <span class="tips">*</span>所属网格
       </div>
       <div class="value">
-        <AiPagePicker type="custom" v-model="selectGird" valueObj nodeKey="id" :ops="{url:'./SelectGird',label: 'girdName'}" formType="2">
+        <AiPagePicker type="gird" v-model="selectGird" valueObj nodeKey="id" formType="2">
           <AiMore v-model="selectGird.girdName"/>
         </AiPagePicker>
       </div>

src/apps/AppGridManagement/AppGridManagement.vue

@@ -3,8 +3,7 @@
     <template v-if="isGridMember">
       <div class="pad-t32" v-if="component != 'Map'"/>
       <div class="select-gird" v-if="component != 'Map'" flex>
-        <AiPagePicker type="custom" class="fill" @select="handleSelectGird"
-                      :ops="{url:'./SelectGird',label: 'girdName'}">
+        <AiPagePicker type="gird" class="fill" @select="handleSelectGird">
           <div flex>
             <img src="./components/img/gird-icon.png" alt="" class="gird-icon">
             <AiMore v-model="params.girdName" icon="arrow-down"/>

src/apps/AppGridManagement/Map.vue

@@ -1,8 +1,7 @@
 <template>
   <div class="detail">
     <div class="grid-select">
-      <AiPagePicker type="custom" class="fill" @select="handleSelectGird"
-                    :ops="{url:'./SelectGird',label: 'girdName'}">
+      <AiPagePicker type="gird" class="fill" @select="handleSelectGird">
         <div class="gird-content">
           <div class="label">网格选择</div>
           <div class="grid-select__right">

src/apps/AppGridManagement/SelectGird.vue

@@ -1,272 +0,0 @@
-<template>
-  <div class="SelectGird">
-    <div class="header-middle">
-      <div class="hint">
-        <span v-for="(item, index) in slectList" :key="index">
-          <span v-if="index" style="margin:0 4px;" v-text="`/`"/>
-          <span style="color:#3F8DF5" @click="girdNameClick(item, index)" v-text="item.girdName"/>
-        </span>
-      </div>
-      <div class="showTypes">
-        <div v-if="treeList.length > 0">
-          <div class="cards" v-for="(item, index) in treeList" :key="index" @click="itemClick(item)">
-            <div class="imges">
-              <img src="./components/img/xzh.png" alt="" class="imgselect" v-if="item.isChecked"
-                   @click.stop="girdClick(item, index)"/>
-              <img src="./components/img/xz.png" alt="" class="imgselect" v-else @click.stop="girdClick(item, index)"/>
-              <img src="./components/img/gird--select-icon.png" alt="" class="avatras"/>
-            </div>
-            <div class="rightes fill">
-              <div class="applicationNames fill">{{ item.girdName }}</div>
-            </div>
-          </div>
-        </div>
-        <AiEmpty :description="isGridMember?`暂无数据`:`当前人员不是网格员或网格长`" class="emptyWrap" v-else/>
-      </div>
-    </div>
-    <!-- <div style="padding-bottom: 70px;"></div> -->
-    <div class="subBtn" flex>
-      <div v-if="clearable" class="cancel" @click="cancel">清空</div>
-      <div @click="submit">确定选择</div>
-    </div>
-  </div>
-</template>
-
-<script>
-import {mapState} from "vuex";
-
-export default {
-  name: 'SelectGird',
-  data() {
-    return {
-      SelectGird: {},
-      allData: null,
-      treeList: [],
-      slectList: [],
-      parentGirdId: '',
-      isFormMap: 0, //1为网格地图 一级不允许选中
-    }
-  },
-  computed: {
-    ...mapState(['user']),
-    isMyGirds() {
-      return this.$route.query.self == true
-    },
-    isGridMember() {
-      return this.user.girdCheckType > 0
-    },
-    //是否是网格员申报
-    isApply: v => v.$route.query.formType == 2,
-    clearable: v => v.$route.query.clearable,
-    selected: v => [v.$route.query.selected].flat()
-  },
-  onLoad(option) {
-    if (option.isFormMap) {
-      this.isFormMap = option.isFormMap
-    }
-    this.isGridMember || this.isApply ? this.getAllGrids() : this.$u.toast('当前人员不是网格员或网格长')
-  },
-  methods: {
-    getAllGrids() {
-      this.slectList = []
-      let {girdMemberId} = this.user,
-          url = `/app/appgirdmemberinfo/queryMyGirdListByLevel2AndUser`,
-          params = {girdMemberId}
-      if (this.isApply) {
-        url = `/app/appgirdinfo/listByInfo`
-        params = {}
-      }
-      if (this.isMyGirds) {
-        url = `/app/appgirdmemberinfo/queryMyGirdListByLevel2`
-      }
-      this.$http.post(url, null, {params}).then((res) => {
-        if (res?.data) {
-          let parents = res.data.map(e => e.parentGirdId)
-          this.allData = res.data.map(e => ({...e, hasChildren: parents.includes(e.id)}))
-          this.treeInit()
-        }
-      })
-    },
-    treeInit(isClick) {
-      let last = uni.getStorageSync("lastSelectedGrid")
-      if (!isClick && last && !this.isApply) {
-        this.$http.post("/app/appgirdinfo/listFatherGirdInfo", null, {
-          params: {girdId: last}
-        }).then(res => {
-          if (res?.data) {
-            this.slectList = [{girdName: '可选范围', id: ''}, res.data.filter(e => !!this.allData.find(a => a.id == e.id))].flat()
-            this.getGridsByGridMemberAndParent({id: last})
-          }
-        })
-      } else {
-        this.treeList = this.allData.filter((e, i, arr) => !arr.map(e => e.id).includes(e.parentGirdId) || this.isMyGirds)
-        this.treeList.map((item) => item.isChecked = this.selected.includes(item.id))
-        let obj = {girdName: '可选范围', id: ''}
-        this.slectList.push(obj)
-      }
-    },
-    itemClick(row) {
-      if (row.hasChildren) {
-        let obj = {
-          girdName: row.girdName,
-          id: row.id,
-        }
-        this.slectList.push(obj)
-        this.getGridsByGridMemberAndParent(row)
-      }
-    },
-    getGridsByGridMemberAndParent(row) {
-      let {id: parentGirdId} = row
-      this.treeList = this.allData.filter(e => e.parentGirdId == parentGirdId)
-      this.treeList.map((item) => item.isChecked = this.selected.includes(item.id))
-    },
-    girdNameClick(row, index) {
-      if (!index) { //第一级别
-        this.slectList = []
-        this.treeInit(true)
-      } else {
-        this.slectList.splice(index, 8)
-        this.getGridsByGridMemberAndParent(row)
-      }
-    },
-    girdClick(row, index) {
-      if (this.treeList[index].isChecked) {//取消
-        this.treeList[index].isChecked = false
-        this.SelectGird = {}
-      } else {
-        this.treeList.map((item) => {
-          item.isChecked = false
-        })
-        this.treeList[index].isChecked = true
-        this.SelectGird = row
-      }
-      this.$forceUpdate()
-    },
-    submit() {
-      if (this.SelectGird.id != null) {
-        if (!this.isApply && !this.isMyGirds) {
-          uni.setStorageSync("lastSelectedGrid", this.SelectGird.parentGirdId)
-        }
-        uni.navigateBack({
-          success: () => {
-            uni.$emit("pagePicker:custom", this.SelectGird)
-          }
-        })
-      } else {
-        return this.$u.toast('请选择网格')
-      }
-    },
-    cancel() {
-      this.SelectGird = {}
-      uni.navigateBack({
-        success: () => {
-          uni.$emit("pagePicker:custom", this.SelectGird)
-        }
-      })
-    }
-  }
-}
-</script>
-
-<style scoped lang="scss">
-.SelectGird {
-  min-height: 100vh;
-  background: #fff;
-  padding-bottom: 140px;
-  box-sizing: border-box;
-
-  .header-middle {
-    .hint {
-      padding: 28px 20px 28px 32px;
-      line-height: 56px;
-      box-shadow: 0px 1px 0px 0px #e4e5e6;
-      font-size: 30px;
-      font-weight: 500;
-      word-break: break-all;
-    }
-
-    .showTypes {
-      .cards {
-        display: flex;
-        align-items: center;
-        height: 120px;
-        line-height: 120px;
-        // background: pink;
-        padding: 0 0 0 32px;
-
-        .imges {
-          display: flex;
-          align-items: center;
-          // width: 200px;
-          .imgselect {
-            width: 48px;
-            height: 48px;
-            vertical-align: middle;
-          }
-
-          .avatras {
-            width: 74px;
-            height: 74px;
-            border-radius: 8px;
-            margin-left: 36px;
-          }
-        }
-
-        img {
-          width: 74px;
-          height: 74px;
-          border-radius: 8px;
-        }
-
-        .rightes {
-          display: flex;
-          border-bottom: 1px solid #e4e5e6;
-          padding: 0 16px;
-
-          .applicationNames {
-            display: inline-block;
-            font-size: 36px;
-            font-weight: 500;
-            color: #333333;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            vertical-align: bottom;
-          }
-        }
-      }
-    }
-
-  }
-
-  .subBtn {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 118px;
-    background: #f4f8fb;
-    justify-content: flex-end;
-
-    div {
-      width: 192px;
-      height: 80px;
-      line-height: 80px;
-      text-align: center;
-      border: 2px solid #1365dd;
-      background: #1365dd;
-      border-radius: 4px;
-      font-size: 32px;
-      color: #fff;
-      margin-right: 32px;
-
-      &.cancel {
-        color: #333;
-        background: #fff;
-        border-color: #ddd;
-      }
-    }
-  }
-
-}
-</style>

src/apps/AppHandSnapshot/List.vue

@@ -5,8 +5,7 @@
               @change="change"></u-tabs>
       <div class="select-top">
         <div class="tab-item">
-          <AiPagePicker type="custom" v-model="searchGrid" @change="confirm" valueObj nodeKey="id" formType="2"
-                        :ops="{url:'../AppGridManagement/SelectGird',label: 'girdName'}">
+          <AiPagePicker type="gird" v-model="searchGrid" @change="confirm" valueObj nodeKey="id" formType="2">
             <AiMore v-model="searchGrid.girdName" icon="arrow-down" placeholder="所属网格"/>
           </AiPagePicker>
         </div>

src/apps/AppSpecialPeople/AppSpecialPeople.vue

@@ -8,7 +8,7 @@
       <div class="area-select">
         <div class="select-content">
           <div class="area-content fill">
-            <AiPagePicker type="custom" @select="handleGridSelect" :ops="{url:'../AppGridManagement/SelectGird',label: 'girdName'}">
+            <AiPagePicker type="gird" @select="handleGridSelect">
               <AiMore v-model="gridName" placeholder="选择网格"/>
             </AiPagePicker>
           </div>

src/apps/AppSpecialPeople/add.vue

@@ -151,7 +151,7 @@
           <div class="item" v-else-if="item.type == 'gird'">
             <span class="label"><span class="tips">{{ item.mustFill == 1 ? '*' : '' }}</span>{{ item.fieldName }}</span>
             <div class="value" flex>
-              <AiPagePicker type="custom" @select="v=>handleSelectGird(v,item)" :ops="{url:'../AppGridManagement/SelectGird',label: 'girdName'}">
+              <AiPagePicker type="gird" @select="v=>handleSelectGird(v,item)">
                 <AiMore v-model="formData[item.fieldDbName + '_name']" :placeholder="item.fieldTips"/>
               </AiPagePicker>
             </div>

src/components/pages/selectGird.vue

@@ -1,46 +1,33 @@
 <template>
-  <div class="selectGird">
-    <AiTopFixed>
-      <u-search placeholder="搜索" v-model="name" :show-action="false"/>
-      <div class="hint">
-        <span v-for="(item, index) in selectList" :key="index"><span v-if="index" style="margin:0 4px;">/</span><span
-            style="color:#3F8DF5" @click="girdNameClick(item, index)">{{ item.girdName }}</span></span>
-      </div>
-    </AiTopFixed>
+  <div class="SelectGird">
     <div class="header-middle">
+      <div class="hint">
+        <span v-for="(item, index) in slectList" :key="index">
+          <span v-if="index" style="margin:0 4px;" v-text="`/`"/>
+          <span style="color:#3F8DF5" @click="girdNameClick(item, index)" v-text="item.girdName"/>
+        </span>
+      </div>
       <div class="showTypes">
-        <div v-if="options.length > 0">
-          <div class="cards" v-for="(item, index) in options" :key="index" @click="itemClick(item)">
-            <div class="imges" v-if="!isDisabledOneGird">
-              <img src="./img/xzh.png" alt="" class="imgselect" v-if="item.isChecked"
+        <div v-if="treeList.length > 0">
+          <div class="cards" v-for="(item, index) in treeList" :key="index" @click="itemClick(item)">
+            <div class="imges">
+              <img src="./components/img/xzh.png" alt="" class="imgselect" v-if="item.isChecked"
                    @click.stop="girdClick(item, index)"/>
-              <img src="./img/xz.png" alt="" class="imgselect" v-else
-                   @click.stop="girdClick(item, index)"/>
-              <img src="./img/gird--select-icon.png" alt="" class="avatras"/>
+              <img src="./components/img/xz.png" alt="" class="imgselect" v-else @click.stop="girdClick(item, index)"/>
+              <img src="./components/img/gird--select-icon.png" alt="" class="avatras"/>
             </div>
-            <div class="imges" v-if="isDisabledOneGird">
-              <div v-if="item.girdLevel != 0">
-                <img src="./img/xzh.png" alt="" class="imgselect" v-if="item.isChecked"
-                     @click.stop="girdClick(item, index)"/>
-                <img src="./img/xz.png" alt="" class="imgselect" v-else
-                     @click.stop="girdClick(item, index)"/>
-              </div>
-              <span v-else class="imgselect"></span>
-              <img src="./img/gird--select-icon.png" alt="" class="avatras"/>
-            </div>
-
-            <div class="rightes">
+            <div class="rightes fill">
               <div class="applicationNames fill">{{ item.girdName }}</div>
-              <u-icon v-if="item.girdLevel != 2" name="arrow-right" color="#ddd"/>
             </div>
           </div>
         </div>
-        <AiEmpty description="暂无数据" class="emptyWrap" v-else/>
+        <AiEmpty :description="isGridMember?`暂无数据`:`当前人员不是网格员或网格长`" class="emptyWrap" v-else/>
       </div>
     </div>
-    <div class="pad-b118"/>
-    <div class="footer">
-      <div class="btn" @click="confirm">确定选择</div>
+    <!-- <div style="padding-bottom: 70px;"></div> -->
+    <div class="subBtn" flex>
+      <div v-if="clearable" class="cancel" @click="cancel">清空</div>
+      <div @click="submit">确定选择</div>
     </div>
   </div>
 </template>
@@ -49,125 +36,99 @@
 import {mapState} from "vuex";
 
 export default {
-  name: 'selectGird',
-  appName: "网格选择",
+  name: 'SelectGird',
   data() {
     return {
-      current: 1,
-      name: '',
-      list: [],
-      selected: [],
       SelectGird: {},
       allData: null,
       treeList: [],
-      selectList: [],
-      userList: [],
-      girdLevel: 0,
+      slectList: [],
       parentGirdId: '',
-      isMyGird: false, //是否只查询当前户对应的网格员管理的三级网格
-      isDisabledOneGird: false, //是否可以选择一级网格 true不可选
+      isFormMap: 0, //1为网格地图 一级不允许选中
     }
   },
   computed: {
     ...mapState(['user']),
-    options() {
-      return this.treeList.filter(e => e.girdName?.indexOf(this.name) > -1 || !this.name) || []
+    isMyGirds() {
+      return this.$route.query.self == true
     },
-    isGirdUser() {
-      return this.user.girdCheckType != 0
-    }
+    isGridMember() {
+      return this.user.girdCheckType > 0
+    },
+    //是否是网格员申报
+    isApply: v => v.$route.query.formType == 2,
+    clearable: v => v.$route.query.clearable,
+    selected: v => [v.$route.query.selected].flat()
   },
-  onLoad(params) {
-    if (params.girdLevel) {
-      this.girdLevel = params.girdLevel
+  onLoad(option) {
+    if (option.isFormMap) {
+      this.isFormMap = option.isFormMap
     }
-    if (params.isMyGird) {
-      this.isMyGird = params.isMyGird
-    }
-
-    if (params.isDisabledOneGird) {
-      this.isDisabledOneGird = params.isDisabledOneGird
-    }
-    if (this.isGirdUser) {
-      if (this.isMyGird) {
-        this.getMyGird()
-      } else {
-        this.getTree()
-      }
-    } else this.$u.toast('当前人员不是网格员或网格管理员')
+    this.isGridMember || this.isApply ? this.getAllGrids() : this.$u.toast('当前人员不是网格员或网格长')
   },
   methods: {
-    getMyGird() {
-      this.selectList = []
-      this.$http.post('/app/appgirdmemberinfo/queryMyGirdListByLevel2AndUser').then((res) => {
-        if (res?.data) {
-          this.allData = res.data
-          this.treeInit()
-        }
-      })
-    },
-    getTree() {
-      this.selectList = []
-      this.$http.post(`/app/appgirdinfo/queryAppGirdInfoByGirdLevel?girdLevel=${this.girdLevel}&girdMemberId=${this.user.girdMemberId}&parentGirdId=${this.parentGirdId}`).then((res) => {
-        if (res?.data) {
-          this.allData = res.data
-          this.treeInit()
-        }
-      })
-    },
-
-    treeInit() {
-      this.treeList = this.allData
-      this.treeList.map((item) => {
-        item.isChecked = false
-      })
-      let obj = {
-        girdName: '可选范围',
-        id: '',
-        girdLevel: ''
+    getAllGrids() {
+      this.slectList = []
+      let {girdMemberId} = this.user,
+          url = `/app/appgirdmemberinfo/queryMyGirdListByLevel2AndUser`,
+          params = {girdMemberId}
+      if (this.isApply) {
+        url = `/app/appgirdinfo/listByInfo`
+        params = {}
       }
-      this.selectList.push(obj)
-    },
-
-    itemClick(row) {
-      if (row.girdLevel == 2) return
-      const obj = {
-        girdName: row.girdName,
-        id: row.id,
-        girdLevel: row.girdLevel
-      };
-      this.selectList.push(obj)
-      this.searckGird(row)
-    },
-
-    searckGird(row) {
-      if (row.girdLevel == 2) return
-      const girdLevel = Number(row.girdLevel) + 1;
-      this.$http.post(`/app/appgirdinfo/queryAppGirdInfoByGirdLevel?girdLevel=${girdLevel}&girdMemberId=${this.user.girdMemberId}&parentGirdId=${row.id}`).then((res) => {
+      if (this.isMyGirds) {
+        url = `/app/appgirdmemberinfo/queryMyGirdListByLevel2`
+      }
+      this.$http.post(url, null, {params}).then((res) => {
         if (res?.data) {
-          this.treeList = res.data
+          let parents = res.data.map(e => e.parentGirdId)
+          this.allData = res.data.map(e => ({...e, hasChildren: parents.includes(e.id)}))
+          this.treeInit()
         }
       })
     },
-
-    girdNameClick(row, index) {
-      this.userList = []
-      if (!index) { //第一级别
-        this.selectList = []
-        this.treeInit()
-      } else {
-        const list = [];
-        this.selectList.map((item, i) => {
-          if (i <= index) {
-            list.push(item)
+    treeInit(isClick) {
+      let last = uni.getStorageSync("lastSelectedGrid")
+      if (!isClick && last && !this.isApply) {
+        this.$http.post("/app/appgirdinfo/listFatherGirdInfo", null, {
+          params: {girdId: last}
+        }).then(res => {
+          if (res?.data) {
+            this.slectList = [{girdName: '可选范围', id: ''}, res.data.filter(e => !!this.allData.find(a => a.id == e.id))].flat()
+            this.getGridsByGridMemberAndParent({id: last})
           }
         })
-        this.selectList = list
-        this.searckGird(row)
+      } else {
+        this.treeList = this.allData.filter((e, i, arr) => !arr.map(e => e.id).includes(e.parentGirdId) || this.isMyGirds)
+        this.treeList.map((item) => item.isChecked = this.selected.includes(item.id))
+        let obj = {girdName: '可选范围', id: ''}
+        this.slectList.push(obj)
+      }
+    },
+    itemClick(row) {
+      if (row.hasChildren) {
+        let obj = {
+          girdName: row.girdName,
+          id: row.id,
+        }
+        this.slectList.push(obj)
+        this.getGridsByGridMemberAndParent(row)
+      }
+    },
+    getGridsByGridMemberAndParent(row) {
+      let {id: parentGirdId} = row
+      this.treeList = this.allData.filter(e => e.parentGirdId == parentGirdId)
+      this.treeList.map((item) => item.isChecked = this.selected.includes(item.id))
+    },
+    girdNameClick(row, index) {
+      if (!index) { //第一级别
+        this.slectList = []
+        this.treeInit(true)
+      } else {
+        this.slectList.splice(index, 8)
+        this.getGridsByGridMemberAndParent(row)
       }
     },
-
-
     girdClick(row, index) {
       if (this.treeList[index].isChecked) {//取消
         this.treeList[index].isChecked = false
@@ -181,42 +142,50 @@ export default {
       }
       this.$forceUpdate()
     },
-    confirm() {
+    submit() {
       if (this.SelectGird.id != null) {
+        if (!this.isApply && !this.isMyGirds) {
+          uni.setStorageSync("lastSelectedGrid", this.SelectGird.parentGirdId)
+        }
         uni.navigateBack({
           success: () => {
-            uni.$emit("pagePicker:gird", [this.SelectGird])
+            uni.$emit("pagePicker:gird", this.SelectGird)
           }
         })
       } else {
         return this.$u.toast('请选择网格')
       }
     },
+    cancel() {
+      this.SelectGird = {}
+      uni.navigateBack({
+        success: () => {
+          uni.$emit("pagePicker:gird", this.SelectGird)
+        }
+      })
+    }
   }
 }
 </script>
 
 <style scoped lang="scss">
-.selectGird {
-  height: 100%;
+.SelectGird {
+  min-height: 100vh;
   background: #fff;
   padding-bottom: 140px;
-
-  .hint {
-    padding-bottom: 28px;
-    line-height: 56px;
-    font-size: 30px;
-    font-weight: 500;
-    word-break: break-all;
-  }
+  box-sizing: border-box;
 
   .header-middle {
-    .showTypes {
-      .empty-div {
-        height: 16px;
-        background: #f5f5f5;
-      }
+    .hint {
+      padding: 28px 20px 28px 32px;
+      line-height: 56px;
+      box-shadow: 0px 1px 0px 0px #e4e5e6;
+      font-size: 30px;
+      font-weight: 500;
+      word-break: break-all;
+    }
 
+    .showTypes {
       .cards {
         display: flex;
         align-items: center;
@@ -228,8 +197,7 @@ export default {
         .imges {
           display: flex;
           align-items: center;
-          width: 158px;
-
+          // width: 200px;
           .imgselect {
             width: 48px;
             height: 48px;
@@ -251,49 +219,54 @@ export default {
         }
 
         .rightes {
-          width: calc(100% - 188px);
           display: flex;
-          justify-content: space-between;
-          align-items: center;
-          margin-left: 32px;
           border-bottom: 1px solid #e4e5e6;
-          padding-right: 16px;
-          box-sizing: border-box;
+          padding: 0 16px;
 
           .applicationNames {
+            display: inline-block;
             font-size: 36px;
             font-weight: 500;
             color: #333333;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
+            vertical-align: bottom;
           }
         }
       }
     }
+
   }
-  .footer {
+
+  .subBtn {
+    position: fixed;
+    bottom: 0;
+    left: 0;
     width: 100%;
     height: 118px;
-    background: #F4F8FB;
-    position: fixed;
-    left: 0;
-    bottom: 0;
-    text-align: right;
+    background: #f4f8fb;
+    justify-content: flex-end;
 
-    .btn {
-      display: inline-block;
+    div {
       width: 192px;
       height: 80px;
       line-height: 80px;
-      background: #1365DD;
-      border-radius: 4px;
       text-align: center;
+      border: 2px solid #1365dd;
+      background: #1365dd;
+      border-radius: 4px;
       font-size: 32px;
-      font-family: PingFangSC-Regular, PingFang SC;
-      color: #FFF;
-      margin: 20px 34px 0 0;
+      color: #fff;
+      margin-right: 32px;
+
+      &.cancel {
+        color: #333;
+        background: #fff;
+        border-color: #ddd;
+      }
     }
   }
+
 }
 </style>