manage-client 3.1.43 → 3.1.47

package/src/components/daping/RedactDaPing.vue

@@ -1,468 +1,468 @@
-<template>
-  <div class="flex container-fluid" style="height:100%;">
-      <div style="width: 100%;height:45%;">
-        <h3 class="row" style="text-align: center;height:10%;">管网信息录入</h3>
-        <div style="height:88%;margin-bottom: 2%;">
-          <div class="col-sm-9" style="overflow-y: auto;">
-            <div class="row" style="height: 15%;" v-for="(index,item) in netWorkAll">
-              <div class="col-sm-2 form-group">
-                <label class="font_normal_body">类型</label>
-                <v-select :value.sync="item.f_type" v-model="item.f_type"
-                          title="参数: 管网类型(大屏信息录入)"
-                          :options='networktype' placeholder='类型'
-                          :value-single="true"
-                          style="width:60%"
-                          :search="false"
-                          close-on-select></v-select>
-              </div>
-              <div class="col-sm-2 form-group">
-                <label class="font_normal_body">已建数</label>
-                <input type="text" style="width:60%" class="input_search" v-model="item.f_yijian"
-                       placeholder="已建数">
-              </div>
-              <div class="col-sm-2 form-group">
-                <label class="font_normal_body">在建数</label>
-                <input type="text" style="width:60%" class="input_search" v-model="item.f_zaijian"
-                       placeholder="在建数">
-              </div>
-              <div class="col-sm-2 form-group">
-                <label class="font_normal_body">审批数</label>
-                <input type="text" style="width:60%" class="input_search" v-model="item.f_shenpi"
-                       placeholder="审批数">
-              </div>
-            </div>
-          </div>
-          <div class="col-sm-3" style="text-align: center;">
-            <button class="button_clear button_spacing" @click="add(1)">＋</button>
-            <button class="button_clear button_spacing" @click="remove(1)">一</button>
-            <button class="button_search button_spacing" @click="redactSave(1)">保存</button>
-          </div>
-        </div>
-      </div>
-
-
-
-    <div style="width: 100%;height:45%;margin-top: 2%">
-      <h3 class="row" style="text-align: center;height: 10%;">收费信息录入</h3>
-      <div style="height:88%;margin-bottom: 2%;">
-        <div class="col-sm-9" style="overflow-y: auto;">
-          <div class="row" style="height: 15%;" v-for="(index,item) in sellingAll">
-            <div class="col-sm-2 form-group">
-              <label class="font_normal_body">营业厅</label>
-              <v-select :value.sync="item.f_depname" v-model="item.f_depname"
-                        :search="false"
-                        :value-single="true"
-                        title="参数: 营业厅(大屏信息录入)"
-                        :options='depname' placeholder='营业厅'
-                        style="width:60%"
-                        close-on-select></v-select>
-            </div>
-            <div class="col-sm-2 form-group">
-              <label class="font_normal_body">用户类型</label>
-              <v-select :value.sync="item.f_user_type" v-model="item.f_user_type"
-                        :search="false"
-                        :value-single="true"
-                        title="参数: 用户类型"
-                        :options='usertype' placeholder='用户类型'
-                        style="width:60%"
-                        close-on-select></v-select>
-
-            </div>
-            <div class="col-sm-2 form-group">
-              <label class="font_normal_body">售气笔数</label>
-              <input type="text" style="width:60%" class="input_search" v-model="item.f_count"
-                     placeholder="售气笔数">
-            </div>
-            <div class="col-sm-2 form-group">
-              <label class="font_normal_body">售气量</label>
-              <input type="text" style="width:60%" class="input_search" v-model="item.f_gas"
-                     placeholder="售气量">
-            </div>
-            <div class="col-sm-2 form-group">
-              <label class="font_normal_body">售气金额</label>
-              <input type="text" style="width:60%" class="input_search" v-model="item.f_money"
-                     placeholder="售气金额">
-            </div>
-            <div class="col-sm-2 form-group">
-              <label class="font_normal_body">归属时间</label>
-              <datepicker placeholder="归属时间" style="width:60%"
-                          v-model="item.f_date"
-                          :value.sync="item.f_date"
-                          :format="'yyyy-MM-dd HH:mm:ss'"
-                          :show-reset-button="true">
-              </datepicker>
-            </div>
-          </div>
-        </div>
-        <div class="col-sm-3" style="text-align: center;">
-          <button class="button_clear button_spacing" @click="add(2)">＋</button>
-          <button class="button_clear button_spacing" @click="remove(2)">一</button>
-          <button class="button_search button_spacing" @click="redactSave(2)">保存</button>
-        </div>
-      </div>
-    </div>
-
-  </div>
-</template>
-
-<script>
-
-import {HttpResetClass} from "vue-client";
-
-let load = async (self) => {
-
-  await self.loadParam(self)
-}
-export default {
-  title: '大屏编辑',
-  data() {
-    return{
-      forNum: 1,
-      param: [],
-      netWorkAll:[
-        {
-          f_type: '高压',
-          f_yijian: 0,
-          f_zaijian: 0,
-          f_shenpi: 0,
-          f_state: '有效'
-        }
-      ],
-      sellingAll:[
-        {
-          f_gas: 0.00,
-          f_money: 0.00,
-          f_depname: '',
-          f_user_type: '民用',
-          f_date: '',
-          f_count: 0,
-          f_state: '有效'
-        }
-      ]
-    }
-  },
-  methods: {
-    loadParam (self) {
-      let http = new HttpResetClass()
-      let a = []
-      http.load('POST', 'rs/sql/singleTableParam', {data:{
-          items: 'p.name,v.name value',
-          tablename:'t_parameter p left join t_paramvalue v on p.id = v.processid',
-          condition: '1 = 1'
-        }
-      }, {
-        resolveMsg: null,
-        rejectMsg: null
-      }).then(res =>{
-        self.param = res.data
-      })
-    },
-    getParam(name){
-      return this.param.filter(item => item.name == name).map(obj =>{return {label: obj.value, value: obj.value}})
-    },
-    add(val){
-      if(val === 1){
-        this.netWorkAll.push({
-          f_type: '高压',
-          f_yijian: 0,
-          f_zaijian: 0,
-          f_shenpi: 0,
-          f_state: '有效'
-        })
-        console.log('dddd', this.netWorkAll)
-      }else{
-        this.sellingAll.push({
-          f_gas: 0.00,
-          f_money: 0.00,
-          f_depname: '',
-          f_user_type: '民用',
-          f_date: '',
-          f_count: 0,
-          f_state: '有效'
-        })
-      }
-
-    },
-    remove(val){
-      if(val === 1){
-        if (this.netWorkAll.length === 1) return
-        this.netWorkAll.splice(this.netWorkAll.length-1, 1)
-      }else{
-        if (this.sellingAll.length === 1) return
-        this.sellingAll.splice(this.sellingAll.length-1, 1)
-      }
-    },
-    redactSave(flag){
-      let http = new HttpResetClass();
-      let data = {
-        state: flag,
-        message: []
-      }
-      if (flag === 1) {
-        data.message = this.netWorkAll
-      } else {
-        data.message = this.sellingAll
-      }
-      http.load('POST', 'rs/logic/RedactSave', {data: data}, {
-        resolveMsg: null,
-        rejectMsg: null
-      }).then(res =>{
-        console.log('55555555555', res)
-        if(res.data === 200) {
-          this.$showAlert('保存成功', 'success', 2000)
-          if (flag === 1) {
-            this.netWorkAll = [{
-              f_type: '高压',
-              f_yijian: 0,
-              f_zaijian: 0,
-              f_shenpi: 0,
-              f_state: '有效'
-            }]
-          } else {
-            this.sellingAll = [{
-              f_gas: 0.00,
-              f_money: 0.00,
-              f_depname: '',
-              f_user_type: '民用',
-              f_date: '',
-              f_count: 0,
-              f_state: '有效'
-            }]
-          }
-        }
-
-      })
-    }
-  },
-  ready () {
-    load(this)
-
-  },
-  watch:{
-  },
-  props: ['changeshow'],
-  computed: {
-    networktype(){
-      return this.getParam('管网类型(大屏信息录入)')
-    },
-    usertype(){
-      return this.getParam('用户类型')
-    },
-    depname(){
-      return this.getParam('营业厅(大屏信息录入)')
-    }
-  },
-}
-</script>
-
-
-
-
-
-
-  /*关键设置 tbody出现滚动条*/
-  #tableLast tbody {
-    display: block;
-    height: 45px;
-
-  }
-
-  #tableLast thead,
-  #tbodyLast tr {
-    display: table;
-    width: 100%;
-    table-layout: fixed;
-    border: 1px;
-    background-color: #012C45;
-    margin-top: 4px;
-  }
-  #tbodyLast tr td {
-    text-align: left;
-    color: #00F6FF;
-  }
-
-
-
-  .font-14-medium1{
-    color: #ffffff;
-    line-height: 24px;
-    font-size: 16px;
-    font-family: font-pingfang-medium;
-  }
-  .scada-font-title {
-    margin-right: 1em;
-    font-family: tRends;
-    font-size: 25px;
-    font-weight: normal;
-    font-stretch: normal;
-    line-height: 30px;
-    letter-spacing: 0px;
-  }
-  .font-14 {
-    font-size: 14px;
-    font-family: tRends;
-  }
-  #top-left {
-    /*padding: 1em;*/
-    width: 32%;
-    height: 100%;
-  }
-
-  #top-mid {
-    /*padding: 1em;*/
-    width: 30%;
-    height: 100%;
-  }
-
-  #top-right {
-    width: 37%;
-    height: 100%;
-  }
-
-  .title-font {
-    font-family: HYk2gj;
-    font-size: 40px;
-    font-weight: normal;
-    font-stretch: normal;
-    line-height: 26px;
-    letter-spacing: 2px;
-    color: #ffffff;
-  }
-
-  .title-main {
-    margin: 0 auto;
-  }
-
-  .flex-inline {
-    display: inline-flex;
-    justify-content: space-around;
-  }
-
-  #pie-one {
-    height: 100%;
-    width: 35%;
-  }
-
-  #weiruhu {
-    font-family: tRends;
-    font-size: 24px;
-    font-weight: normal;
-    font-stretch: normal;
-    line-height: 35px;
-    letter-spacing: 0px;
-    color: #00f6ff;
-  }
-
-  #anjian {
-    font-family: tRENDS;
-    font-size: 24px;
-    font-weight: normal;
-    font-stretch: normal;
-    line-height: 35px;
-    letter-spacing: 0px;
-    color: #ffc21f;
-  }
-
-  .qinhuamap {
-    position: absolute;
-    top: 2%;
-    left: 35%;
-    width: 28%;
-    height: 57%;
-  }
-  .scroll-content {
-    position: relative;
-    transition: top 0.825s;
-  }
-
-}
-@media screen and (max-width: 1440px) {
-  .main {
-    height: 100%;
-    padding: 1em;
-    flex: 1 1 auto;
-    flex-direction: column;
-    display: flex;
-  }
-
-  #top-left {
-    /*padding: 1em;*/
-    width: 32%;
-    height: 100%;
-  }
-
-  #top-mid {
-    /*padding: 1em;*/
-    width: 30%;
-    height: 100%;
-  }
-
-  #top-right {
-    width: 37%;
-    height: 100%;
-  }
-
-  .title-font {
-    font-family: HYk2gj;
-    font-size: 30px;
-    font-weight: normal;
-    font-stretch: normal;
-    line-height: 22px;
-    letter-spacing: 2px;
-    color: #ffffff;
-  }
-
-  .title-main {
-    margin: 0 auto;
-  }
-
-  .flex-inline {
-    display: inline-flex;
-    justify-content: space-around;
-  }
-
-  #pie-one {
-    height: 100%;
-    width: 35%;
-  }
-
-  #weiruhu {
-    font-family: tRends;
-    font-size: 18px;
-    font-weight: normal;
-    font-stretch: normal;
-    line-height: 22px;
-    letter-spacing: 0px;
-    color: #00f6ff;
-  }
-
-  #anjian {
-    font-family: tRENDS;
-    font-size: 18px;
-    font-weight: normal;
-    font-stretch: normal;
-    line-height: 22px;
-    letter-spacing: 0px;
-    color: #ffc21f;
-  }
-
-  .qinhuamap {
-    position: absolute;
-    top: 2%;
-    left: 35%;
-    width: 28%;
-    height: 57%;
-  }
-  .font-14-medium{
-    color: #ffffff !important;
-    line-height: 18px;
-    font-size: 12px;
-    font-family: font-pingfang-medium;
-  }
-  .scroll-content {
-    position: relative;
-    transition: top 0.825s;
-  }
-}
-</style>
-
+<template>
+  <div class="flex container-fluid" style="height:100%;">
+      <div style="width: 100%;height:45%;">
+        <h3 class="row" style="text-align: center;height:10%;">管网信息录入</h3>
+        <div style="height:88%;margin-bottom: 2%;">
+          <div class="col-sm-9" style="overflow-y: auto;">
+            <div class="row" style="height: 15%;" v-for="(index,item) in netWorkAll">
+              <div class="col-sm-2 form-group">
+                <label class="font_normal_body">类型</label>
+                <v-select :value.sync="item.f_type" v-model="item.f_type"
+                          title="参数: 管网类型(大屏信息录入)"
+                          :options='networktype' placeholder='类型'
+                          :value-single="true"
+                          style="width:60%"
+                          :search="false"
+                          close-on-select></v-select>
+              </div>
+              <div class="col-sm-2 form-group">
+                <label class="font_normal_body">已建数</label>
+                <input type="text" style="width:60%" class="input_search" v-model="item.f_yijian"
+                       placeholder="已建数">
+              </div>
+              <div class="col-sm-2 form-group">
+                <label class="font_normal_body">在建数</label>
+                <input type="text" style="width:60%" class="input_search" v-model="item.f_zaijian"
+                       placeholder="在建数">
+              </div>
+              <div class="col-sm-2 form-group">
+                <label class="font_normal_body">审批数</label>
+                <input type="text" style="width:60%" class="input_search" v-model="item.f_shenpi"
+                       placeholder="审批数">
+              </div>
+            </div>
+          </div>
+          <div class="col-sm-3" style="text-align: center;">
+            <button class="button_clear button_spacing" @click="add(1)">＋</button>
+            <button class="button_clear button_spacing" @click="remove(1)">一</button>
+            <button class="button_search button_spacing" @click="redactSave(1)">保存</button>
+          </div>
+        </div>
+      </div>
+
+
+
+    <div style="width: 100%;height:45%;margin-top: 2%">
+      <h3 class="row" style="text-align: center;height: 10%;">收费信息录入</h3>
+      <div style="height:88%;margin-bottom: 2%;">
+        <div class="col-sm-9" style="overflow-y: auto;">
+          <div class="row" style="height: 15%;" v-for="(index,item) in sellingAll">
+            <div class="col-sm-2 form-group">
+              <label class="font_normal_body">营业厅</label>
+              <v-select :value.sync="item.f_depname" v-model="item.f_depname"
+                        :search="false"
+                        :value-single="true"
+                        title="参数: 营业厅(大屏信息录入)"
+                        :options='depname' placeholder='营业厅'
+                        style="width:60%"
+                        close-on-select></v-select>
+            </div>
+            <div class="col-sm-2 form-group">
+              <label class="font_normal_body">用户类型</label>
+              <v-select :value.sync="item.f_user_type" v-model="item.f_user_type"
+                        :search="false"
+                        :value-single="true"
+                        title="参数: 用户类型"
+                        :options='usertype' placeholder='用户类型'
+                        style="width:60%"
+                        close-on-select></v-select>
+
+            </div>
+            <div class="col-sm-2 form-group">
+              <label class="font_normal_body">售气笔数</label>
+              <input type="text" style="width:60%" class="input_search" v-model="item.f_count"
+                     placeholder="售气笔数">
+            </div>
+            <div class="col-sm-2 form-group">
+              <label class="font_normal_body">售气量</label>
+              <input type="text" style="width:60%" class="input_search" v-model="item.f_gas"
+                     placeholder="售气量">
+            </div>
+            <div class="col-sm-2 form-group">
+              <label class="font_normal_body">售气金额</label>
+              <input type="text" style="width:60%" class="input_search" v-model="item.f_money"
+                     placeholder="售气金额">
+            </div>
+            <div class="col-sm-2 form-group">
+              <label class="font_normal_body">归属时间</label>
+              <datepicker placeholder="归属时间" style="width:60%"
+                          v-model="item.f_date"
+                          :value.sync="item.f_date"
+                          :format="'yyyy-MM-dd HH:mm:ss'"
+                          :show-reset-button="true">
+              </datepicker>
+            </div>
+          </div>
+        </div>
+        <div class="col-sm-3" style="text-align: center;">
+          <button class="button_clear button_spacing" @click="add(2)">＋</button>
+          <button class="button_clear button_spacing" @click="remove(2)">一</button>
+          <button class="button_search button_spacing" @click="redactSave(2)">保存</button>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+
+import {HttpResetClass} from "vue-client";
+
+let load = async (self) => {
+
+  await self.loadParam(self)
+}
+export default {
+  title: '大屏编辑',
+  data() {
+    return{
+      forNum: 1,
+      param: [],
+      netWorkAll:[
+        {
+          f_type: '高压',
+          f_yijian: 0,
+          f_zaijian: 0,
+          f_shenpi: 0,
+          f_state: '有效'
+        }
+      ],
+      sellingAll:[
+        {
+          f_gas: 0.00,
+          f_money: 0.00,
+          f_depname: '',
+          f_user_type: '民用',
+          f_date: '',
+          f_count: 0,
+          f_state: '有效'
+        }
+      ]
+    }
+  },
+  methods: {
+    loadParam (self) {
+      let http = new HttpResetClass()
+      let a = []
+      http.load('POST', 'rs/sql/singleTableParam', {data:{
+          items: 'p.name,v.name value',
+          tablename:'t_parameter p left join t_paramvalue v on p.id = v.processid',
+          condition: '1 = 1'
+        }
+      }, {
+        resolveMsg: null,
+        rejectMsg: null
+      }).then(res =>{
+        self.param = res.data
+      })
+    },
+    getParam(name){
+      return this.param.filter(item => item.name == name).map(obj =>{return {label: obj.value, value: obj.value}})
+    },
+    add(val){
+      if(val === 1){
+        this.netWorkAll.push({
+          f_type: '高压',
+          f_yijian: 0,
+          f_zaijian: 0,
+          f_shenpi: 0,
+          f_state: '有效'
+        })
+        console.log('dddd', this.netWorkAll)
+      }else{
+        this.sellingAll.push({
+          f_gas: 0.00,
+          f_money: 0.00,
+          f_depname: '',
+          f_user_type: '民用',
+          f_date: '',
+          f_count: 0,
+          f_state: '有效'
+        })
+      }
+
+    },
+    remove(val){
+      if(val === 1){
+        if (this.netWorkAll.length === 1) return
+        this.netWorkAll.splice(this.netWorkAll.length-1, 1)
+      }else{
+        if (this.sellingAll.length === 1) return
+        this.sellingAll.splice(this.sellingAll.length-1, 1)
+      }
+    },
+    redactSave(flag){
+      let http = new HttpResetClass();
+      let data = {
+        state: flag,
+        message: []
+      }
+      if (flag === 1) {
+        data.message = this.netWorkAll
+      } else {
+        data.message = this.sellingAll
+      }
+      http.load('POST', 'rs/logic/RedactSave', {data: data}, {
+        resolveMsg: null,
+        rejectMsg: null
+      }).then(res =>{
+        console.log('55555555555', res)
+        if(res.data === 200) {
+          this.$showAlert('保存成功', 'success', 2000)
+          if (flag === 1) {
+            this.netWorkAll = [{
+              f_type: '高压',
+              f_yijian: 0,
+              f_zaijian: 0,
+              f_shenpi: 0,
+              f_state: '有效'
+            }]
+          } else {
+            this.sellingAll = [{
+              f_gas: 0.00,
+              f_money: 0.00,
+              f_depname: '',
+              f_user_type: '民用',
+              f_date: '',
+              f_count: 0,
+              f_state: '有效'
+            }]
+          }
+        }
+
+      })
+    }
+  },
+  ready () {
+    load(this)
+
+  },
+  watch:{
+  },
+  props: ['changeshow'],
+  computed: {
+    networktype(){
+      return this.getParam('管网类型(大屏信息录入)')
+    },
+    usertype(){
+      return this.getParam('用户类型')
+    },
+    depname(){
+      return this.getParam('营业厅(大屏信息录入)')
+    }
+  },
+}
+</script>
+
+
+
+
+
+
+  /*关键设置 tbody出现滚动条*/
+  #tableLast tbody {
+    display: block;
+    height: 45px;
+
+  }
+
+  #tableLast thead,
+  #tbodyLast tr {
+    display: table;
+    width: 100%;
+    table-layout: fixed;
+    border: 1px;
+    background-color: #012C45;
+    margin-top: 4px;
+  }
+  #tbodyLast tr td {
+    text-align: left;
+    color: #00F6FF;
+  }
+
+
+
+  .font-14-medium1{
+    color: #ffffff;
+    line-height: 24px;
+    font-size: 16px;
+    font-family: font-pingfang-medium;
+  }
+  .scada-font-title {
+    margin-right: 1em;
+    font-family: tRends;
+    font-size: 25px;
+    font-weight: normal;
+    font-stretch: normal;
+    line-height: 30px;
+    letter-spacing: 0px;
+  }
+  .font-14 {
+    font-size: 14px;
+    font-family: tRends;
+  }
+  #top-left {
+    /*padding: 1em;*/
+    width: 32%;
+    height: 100%;
+  }
+
+  #top-mid {
+    /*padding: 1em;*/
+    width: 30%;
+    height: 100%;
+  }
+
+  #top-right {
+    width: 37%;
+    height: 100%;
+  }
+
+  .title-font {
+    font-family: HYk2gj;
+    font-size: 40px;
+    font-weight: normal;
+    font-stretch: normal;
+    line-height: 26px;
+    letter-spacing: 2px;
+    color: #ffffff;
+  }
+
+  .title-main {
+    margin: 0 auto;
+  }
+
+  .flex-inline {
+    display: inline-flex;
+    justify-content: space-around;
+  }
+
+  #pie-one {
+    height: 100%;
+    width: 35%;
+  }
+
+  #weiruhu {
+    font-family: tRends;
+    font-size: 24px;
+    font-weight: normal;
+    font-stretch: normal;
+    line-height: 35px;
+    letter-spacing: 0px;
+    color: #00f6ff;
+  }
+
+  #anjian {
+    font-family: tRENDS;
+    font-size: 24px;
+    font-weight: normal;
+    font-stretch: normal;
+    line-height: 35px;
+    letter-spacing: 0px;
+    color: #ffc21f;
+  }
+
+  .qinhuamap {
+    position: absolute;
+    top: 2%;
+    left: 35%;
+    width: 28%;
+    height: 57%;
+  }
+  .scroll-content {
+    position: relative;
+    transition: top 0.825s;
+  }
+
+}
+@media screen and (max-width: 1440px) {
+  .main {
+    height: 100%;
+    padding: 1em;
+    flex: 1 1 auto;
+    flex-direction: column;
+    display: flex;
+  }
+
+  #top-left {
+    /*padding: 1em;*/
+    width: 32%;
+    height: 100%;
+  }
+
+  #top-mid {
+    /*padding: 1em;*/
+    width: 30%;
+    height: 100%;
+  }
+
+  #top-right {
+    width: 37%;
+    height: 100%;
+  }
+
+  .title-font {
+    font-family: HYk2gj;
+    font-size: 30px;
+    font-weight: normal;
+    font-stretch: normal;
+    line-height: 22px;
+    letter-spacing: 2px;
+    color: #ffffff;
+  }
+
+  .title-main {
+    margin: 0 auto;
+  }
+
+  .flex-inline {
+    display: inline-flex;
+    justify-content: space-around;
+  }
+
+  #pie-one {
+    height: 100%;
+    width: 35%;
+  }
+
+  #weiruhu {
+    font-family: tRends;
+    font-size: 18px;
+    font-weight: normal;
+    font-stretch: normal;
+    line-height: 22px;
+    letter-spacing: 0px;
+    color: #00f6ff;
+  }
+
+  #anjian {
+    font-family: tRENDS;
+    font-size: 18px;
+    font-weight: normal;
+    font-stretch: normal;
+    line-height: 22px;
+    letter-spacing: 0px;
+    color: #ffc21f;
+  }
+
+  .qinhuamap {
+    position: absolute;
+    top: 2%;
+    left: 35%;
+    width: 28%;
+    height: 57%;
+  }
+  .font-14-medium{
+    color: #ffffff !important;
+    line-height: 18px;
+    font-size: 12px;
+    font-family: font-pingfang-medium;
+  }
+  .scroll-content {
+    position: relative;
+    transition: top 0.825s;
+  }
+}
+</style>
+