sale-client 4.2.133 → 4.2.134

package/src/filiale/yuncheng/ParamSet.vue

@@ -0,0 +1,669 @@
+<template>
+  <div class="basic-main" style="height:100%" >
+    <criteria-paged :model='model' v-ref:paged>
+      <criteria :model='model' partial='criteria' v-ref:criteria @condition-changed='$parent.selfSearch'>
+        <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
+          <div class="row">
+            <div class="col-sm-3" style="width:20%">
+              <label class="font_normal_body" >气表协议类型</label>
+              <v-select style="width:60%" title="气表协议类型"
+                        placeholder='气表协议类型'
+                        :value.sync="model.f_metertype"
+                        v-model="model.f_metertype"
+                        :options='$parent.$parent.metertype'
+                        condition="f_metertype = '{}'"
+                        close-on-select
+                        :value-single="true" v-ref:brand>  </v-select>
+            </div>
+            <div class="col-sm-2">
+              <label class="font_normal_body">气表品牌</label>
+              <v-select
+                placeholder='气表品牌'
+                :value.sync="$parent.$parent.f_gasbrand_id"
+                style="width:60%"
+                v-model="$parent.$parent.f_gasbrand_id"
+                :options='$parent.$parent.meterbrand'
+                condition="f_gasbrand_id = '{}'"
+                close-on-select></v-select>
+            </div>
+            <div class="col-sm-2">
+              <label class="font_normal_body">气表型号</label>
+              <v-select :value.sync="model.f_meter_style"
+                        v-model="model.f_meter_style"
+                        :options='$parent.$parent.meterstyle[$parent.$parent.f_gasbrand_id]' placeholder='请选择'
+                        condition="f_gasmodel_id = '{}'"
+                        close-on-select></v-select>
+            </div>
+            <div class="col-sm-2">
+              <label class="font_normal_body">客户编号</label>
+              <input @keyup.enter="search" style="width:60%" type="text" class="input_search "
+                     v-model="model.f_userinfo_code"
+                     placeholder='客户编号'
+                     condition="f_userinfo_code like '%{}%'"
+              >
+            </div>
+            <div class="span" style="float:right;">
+              <button style="float: right" class="button_search button_spacing" @click="search()" v-el:cba>查询</button>
+              <button style="float: right" class="button_search button_spacing" v-show="$parent.$parent.setable" @click="$parent.$parent.showParamDefault()" v-el:cba>设置品牌默认参数</button>
+              <button style="float: right" class="button_search button_spacing" v-show="$parent.$parent.setable" @click="$parent.$parent.showParam()" v-el:cba>设置参数</button>
+              <div style="float: right"  class="button_spacing"
+                   :class="{'button_shrink_top':$parent.$parent.criteriaShow,'button_shrink_bottom':!$parent.$parent.criteriaShow}"
+                   @click="$parent.$parent.hidden()"></div>
+            </div>
+          </div>
+          <div class="row" v-show="$parent.$parent.criteriaShow">
+            <div class="col-sm-2" >
+              <label class="font_normal_body">组织机构</label>
+              <res-select :initresid='$parent.$parent.curorgid'
+                          @res-select="$parent.$parent.getorg"
+                          class="select select_list"
+                          restype='organization'
+                          style="width: 60%">
+              </res-select>
+            </div>
+            <div class="col-sm-2 ">
+              <label class="font_normal_body">表&emsp;号&emsp;</label>
+              <input @keyup.enter="search" style="width:60%" type="text" class="input_search"
+                     v-model="model.f_meternumber"
+                     placeholder='表号'
+                     condition="f_meternumber like '%{}%'"
+              >
+            </div>
+            <div class="col-sm-2 ">
+              <label class="font_normal_body">客户姓名</label>
+              <input @keyup.enter="search" style="width:60%" type="text" class="input_search"
+                     v-model="model.f_user_name"
+                     placeholder='客户姓名'
+                     condition="f_user_name = '{}'"
+              >
+            </div>
+            <div class="col-sm-2 ">
+              <label class="font_normal_body">小&emsp;区&emsp;</label>
+              <input @keyup.enter="search" style="width:60%" type="text" class="input_search"
+                     v-model="model.f_residential_area"
+                     placeholder='小区'
+                     condition="f_residential_area like '%{}%'"
+              >
+            </div>
+            <div class="col-sm-2">
+              <label class="font_normal_body">用户类型</label>
+              <v-select
+                placeholder='用户类型'
+                value-single="true"
+                style="width:60%"
+                :value.sync="model.f_user_type"
+                v-model="model.f_user_type"
+                :options='$parent.$parent.Gasusertype'
+                close-on-select condition="f_user_type ='{}'">
+              </v-select>
+            </div>
+
+            <div class="col-sm-2">
+              <label class="font_normal_body">用气性质</label>
+              <v-select
+                placeholder='用气性质'
+                value-single="true"
+                :value.sync="model.f_gasproperties"
+                style="width:60%"
+                v-model="model.f_gasproperties"
+                :options='$parent.$parent.Gasproperties'
+                close-on-select condition="f_gasproperties ='{}'">
+              </v-select>
+            </div>
+            <div class="col-sm-2">
+              <label class="font_normal_body">通气日期</label>
+              <datepicker id="f_gas_date" placeholder="开始时间" style="width:60%"
+                          v-model="model.f_start_date"
+                          :value.sync="model.f_start_date"
+                          :format="'yyyy-MM-dd HH:mm:ss'"
+                          condition="f_gas_date >= '{}' "
+                          :show-reset-button="true">
+              </datepicker>
+            </div>
+            <div class="col-sm-2">
+              <label class="font_normal_body">至&emsp;&emsp;&emsp;</label>
+              <datepicker id="f_gas_date" placeholder="结束时间" style="width:60%"
+                          v-model="model.f_end_date"
+                          :value.sync="model.f_end_date"
+                          :format="'yyyy-MM-dd HH:mm:ss'"
+                          condition="f_gas_date <= '{}' "
+                          :show-reset-button="true">
+              </datepicker>
+            </div>
+            <div class="col-sm-2">
+              <label class="font_normal_body">安装日期</label>
+              <datepicker id="f_install_date" placeholder="开始时间" style="width:60%"
+                          v-model="model.f_install_start"
+                          :value.sync="model.f_install_start"
+                          :format="'yyyy-MM-dd HH:mm:ss'"
+                          condition="f_install_date >= '{}' "
+                          :show-reset-button="true">
+              </datepicker>
+            </div>
+            <div class="col-sm-2">
+              <label class="font_normal_body">至&emsp;&emsp;&emsp;</label>
+              <datepicker id="f_gas_date" placeholder="结束时间" style="width:60%"
+                          v-model="model.f_install_end"
+                          :value.sync="model.f_install_end"
+                          :format="'yyyy-MM-dd HH:mm:ss'"
+                          condition="f_install_date <= '{}' "
+                          :show-reset-button="true">
+              </datepicker>
+            </div>
+            <div class="col-sm-2 ">
+              <label class="font_normal_body">用气地址</label>
+              <input @keyup.enter="search" style="width:60%" type="text" class="input_search"
+                     v-model="model.f_address"
+                     placeholder='用气地址'
+                     condition="f_address like '%{}%'"
+              >
+            </div>
+          </div>
+        </div>
+      </criteria>
+      <data-grid :model="model" partial='list' v-ref:grid class="list_area table_sy" :optional="true">
+        <template partial='head'>
+          <tr>
+<!--            <th style="text-align:center">-->
+<!--              <nobr>全选</nobr>-->
+<!--              <input @keyup.enter="search" style="width:60%" type="checkbox" v-model='checked1'-->
+<!--                     @click="$parent.$parent.$parent.checkedALL()">-->
+<!--            </th>-->
+            <!--<th >操作</th>-->
+            <th style="text-align:center">
+              <nobr>客户编号</nobr>
+            </th>
+            <th style="text-align:center">
+              <nobr>客户姓名</nobr>
+            </th>
+            <th style="text-align:center">
+              <nobr>用气地址</nobr>
+            </th>
+            <th style="text-align:center">
+              <nobr>表编号</nobr>
+            </th>
+            <th style="text-align:center">
+              <nobr>客户类型</nobr>
+            </th>
+            <th style="text-align:center">
+              <nobr>用气性质</nobr>
+            </th>
+            <th style="text-align:center">
+              <nobr>气表品牌</nobr>
+            </th>
+
+            <th style="text-align:center">
+              <nobr>气表型号</nobr>
+            </th>
+            <th style="text-align:center">
+              <nobr>安装日期</nobr>
+            </th>
+            <th style="text-align:center">
+              <nobr>通气日期</nobr>
+            </th>
+            <th style="text-align:center">
+              <nobr>阀门状态</nobr>
+            </th>
+            <th style="text-align:center" v-if="$parent.$parent.$parent.setable">
+              <nobr>查看</nobr>
+            </th>
+
+          </tr>
+        </template>
+        <template partial='body'>
+          <tr>
+            <!--<td>-->
+            <!--<button type="button" name="button" class="btn btn-link" v-if="row.f_user_state === '正常'"-->
+            <!--@click.stop="$parent.$parent.$parent.paramSet(row)">参数设置-->
+            <!--</button>-->
+            <!--</td>-->
+            <td style="text-align:center">
+              <nobr>{{row.f_userinfo_code}}</nobr>
+            </td>
+            <td style="text-align:center">
+              <nobr>{{row.f_user_name}}</nobr>
+            </td>
+            <td>
+              <nobr>{{row.f_address}}</nobr>
+            </td>
+            <td style="text-align:center">
+              <nobr>{{row.f_meternumber}}</nobr>
+            </td>
+            <td style="text-align:center">
+              <nobr>{{row.f_user_type}}</nobr>
+            </td>
+            <td style="text-align:center">
+              <nobr>{{row.f_gasproperties}}</nobr>
+            </td>
+            <td style="text-align:center">
+              <nobr>{{row.f_meter_brand}}</nobr>
+            </td>
+            <td style="text-align:center">
+              <nobr>{{row.f_meter_style}}</nobr>
+            </td>
+            <td style="text-align:center">
+              <nobr>{{row.f_install_date}}</nobr>
+            </td>
+            <td style="text-align:center">
+              <nobr>{{row.f_gas_date}}</nobr>
+            </td>
+            <td style="text-align:center">
+              <nobr>{{row.f_valvestate}}</nobr>
+            </td>
+            <td style="text-align:center" v-if="$parent.$parent.$parent.setable">
+              <nobr v-if="row.f_number > 0">
+                <button type="button" name="button" class="btn btn-link"
+                        @click.stop="$parent.$parent.$parent.showParamHistory(row)">查看设置</button>
+              </nobr>
+            </td>
+
+          </tr>
+        </template>
+        <template partial='foot'></template>
+      </data-grid>
+    </criteria-paged>
+    <modal :show.sync="showParame" v-ref:modal backdrop="false" width="1500px">
+      <header slot="modal-header" class="modal-header">
+        <button type="button" class="close" @click="closeParam"><span>&times;</span></button>
+        <h3 class="modal-title" style="text-align: center;">参数设置</h3>
+      </header>
+      <article slot="modal-body" class="flex-row" >
+        <param-set-form :data="map" :condition="conditionMsg" @showparam="showparam" @clear="clear" :gasbrandid="f_gasbrand_id" :user="user" :checked1 ="checked1" v-ref:form></param-set-form>
+      </article>
+      <footer slot="modal-footer" class="modal-footer">
+      </footer>
+    </modal>
+    <modal :show.sync="paramHistory" v-ref:modal backdrop="false" width="1500px">
+      <header slot="modal-header" class="modal-header">
+        <button type="button" class="close" @click="closeParamHistory"><span>&times;</span></button>
+        <h3 class="modal-title" style="text-align: center;">参数设置记录</h3>
+      </header>
+      <article slot="modal-body" class="flex-row" >
+        <param-history @clear="clear" :gasbrandid="f_gasbrand_id" :user="row" v-ref:history></param-history>
+      </article>
+      <footer slot="modal-footer" class="modal-footer">
+        <!--        <button type="button" class="btn btn-primary"  @click='confirm()'>确认</button>-->
+      </footer>
+    </modal>
+  </div>
+</template>
+
+<script>
+import {PagedList, HttpResetClass} from 'vue-client'
+import ParamSetForm from './ParamSetForm'
+let initGen = async function (self) {
+  await self.$LoadParams.loadParam()
+  let res = self.$GetSaleParam.getGasbrand()
+  // let condition = 'f_meter_type = \'物联网表\''
+  // self.$resetpost('/api/af-revenue/sql/getAllBrands',{data:{condition:condition}}, {resolveMsg: null, rejectMsg: null}).then((res)=>{
+  let arr = []
+  res.forEach((item) => {
+    if (item.value.f_meter_type === '物联网表') {
+      let temp = {}
+      temp.label = item.label
+      temp.value = item.value.id
+      arr.push(temp)
+      let styleArr = []
+      for (let row of item.value.gasmodel) {
+        styleArr.push({label: row.label, value: row.value.id})
+      }
+      self.meterstyle[temp.value] = styleArr
+    }
+  })
+  self.meterbrand = arr
+  // })
+}
+export default {
+  components: {ParamSetForm},
+  title: '参数设置',
+  name: 'param-set',
+  data () {
+    return {
+      user: [],
+      meterbrand: [],
+      meterstyle: {},
+      curorgid: [this.$login.f.orgid],
+      f_orgid: '',
+      model: new PagedList('api/af-revenue/sql/iot_getOpertionList', 20),
+      searchshow: false,
+      showParame: false,
+      paramHistory: false,
+      row: null,
+      setable: true,
+      criteriaShow: false,
+      condition: '',
+      f_gasbrand_id: null,
+      orgcondition: ' and f_orgid = ' + this.$login.f.orgid,
+      isShowUserException: false,
+      val1: '',
+      f_beizhu: '',
+      Gasusertype: [],
+      Gasproperties: [],
+      checked1: false,
+      WarningType: [
+        {label: '全部', value: ''}
+      ],
+      initres: {
+        org: [this.$login.f.orgid],
+        dep: [],
+        user: []
+      },
+      styles: false,
+      excelTable: true,
+      getfield: {
+        'f_orgname': '组织机构',
+        'f_userinfo_code': '客户号',
+        'f_user_type': '客户类型',
+        'f_gasproperties': '用气性质',
+        'f_user_name': '客户姓名',
+        'f_address': '用气地址',
+        'f_gas_date': '通气日期',
+        'f_install_date':'安装日期',
+        'f_meternumber': '表钢号',
+        'f_meter_brand': '气表品牌',
+        'f_user_id': '表编号',
+        'f_meter_style': '气表型号',
+        'f_valvestate': '阀门状态'
+
+      },
+      obj: {
+        userid: this.$login.f.id,
+        source: `tool.getFullTree(this.getRights().where(row.getType() == $organization$))`,
+        res: this.$login.f.f_fengongsi,
+        resids: this.$login.f.orgid
+      },
+      // 开关阀权限
+      valveLimit: false,
+      // 设置参数权限
+      Setarameterermissions: false,
+      parameterType: '',
+      map: new Map(),
+      conditionMsg: '',
+      isCheckAll: false
+    }
+  },
+  ready () {
+    initGen(this)
+    // this.model.search('1=1')
+  },
+  methods: {
+    getorg (val) {
+      this.f_orgid = this.$login.convertToIn(val)
+    },
+    //    let condition = 'f_meter_type = "物联网表"'
+    // this.$resetpost('/api/af-revenue/sql/getAllBrands',{data:{condition:condition}},{}).then((res)=>{
+    //   let arr=[]
+    //   res.data.forEach((item) => {
+    //     let temp = {}
+    //     temp.label = item.f_meter_brand
+    //     temp.value = item.f_gasbrand_id
+    //     arr.push(temp)
+    //   })
+    //   this.meterbrand = [{label: '全部', value: ''}, ...arr]
+    // })
+    showParamHistory (row) {
+      this.paramHistory = !this.paramHistory
+      this.row = [row]
+    },
+    closeParamHistory () {
+      this.paramHistory = !this.paramHistory
+      this.$refs.history.row = {}
+    },
+    hidden () {
+      this.criteriaShow = !this.criteriaShow
+    },
+    async showParamDefault () {
+      this.user = null
+      this.map.clear()
+      await this.$refs.form.getBrandParamsHistory()
+      this.showParame = !this.showParame
+    },
+    showParam () {
+      this.conditionMsg = ''
+      if (this.$refs.paged.$refs.grid.getRowData().length === 0) {
+        this.user = []
+      } else {
+        this.user = this.$refs.paged.$refs.grid.getRowData()
+      }
+      if (this.user.length === 0) {
+        this.$showMessage('是否要设置查询出来的所有表参数', ['confirm', 'cancel']).then((res) => {
+          if (res === 'confirm') {
+            this.isCheckAll = true
+            let conditionMsg = ''
+            if (this.$refs.paged.$refs.criteria.model.f_gasbrand_id) {
+              this.meterbrand.forEach((item) => {
+                if (item.value === this.$refs.paged.$refs.criteria.model.f_gasbrand_id) {
+                  conditionMsg += ('气表品牌:' + item.label + ';')
+                }
+              })
+            }
+            if (this.$refs.paged.$refs.criteria.model.f_userinfo_code) {
+              conditionMsg += ('客户编号:' + this.$refs.paged.$refs.criteria.model.f_userinfo_code + ';')
+            }
+            if (this.$refs.paged.$refs.criteria.model.f_meternumber) {
+              conditionMsg += ('表号:' + this.$refs.paged.$refs.criteria.model.f_meternumber + ';')
+            }
+            if (this.$refs.paged.$refs.criteria.model.f_meternumber) {
+              conditionMsg += ('表号:' + this.$refs.paged.$refs.criteria.model.f_meternumber + ';')
+            }
+            if (this.$refs.paged.$refs.criteria.model.f_user_name) {
+              conditionMsg += ('客户姓名:' + this.$refs.paged.$refs.criteria.model.f_user_name + ';')
+            }
+            if (this.$refs.paged.$refs.criteria.model.f_residential_area) {
+              conditionMsg += ('小区:' + this.$refs.paged.$refs.criteria.model.f_residential_area + ';')
+            }
+            this.conditionMsg = conditionMsg
+            this.$resetpost('api/af-revenue/sql/iot_getOpertionList', {data: {condition: this.condition}}, {resolveMsg: null, rejectMsg: null}).then((rat) => {
+              this.user = rat.data
+              console.log('user',this.user.length,this.user)
+              this.mapset(rat.data)
+              this.showParame = !this.showParame
+            })
+          }
+        })
+      } else {
+        this.isCheckAll = false
+        this.showParame = !this.showParame
+      }
+    },
+    closeParam () {
+      // this.$refs.form.row={}
+      this.showParame = !this.showParame
+      // if (this.isCheckAll) {
+      this.map.clear()
+      this.user = []
+      // }
+      // this.isCheckAll = false
+    },
+    clear () {
+      this.$refs.form.paramtype = ''
+      // this.isCheckAll = false
+      this.showParame = false
+      this.map.clear()
+      this.user = []
+      // this.unCheckAll()
+      this.search()
+    },
+    selfSearch (args) {
+      if (this.f_orgid) {
+        args.condition = `f_orgid in ${this.f_orgid} and ${args.condition}`
+      }
+      if (this.f_gasbrand_id.length > 0) {
+        args.condition += ' and f_gasbrand_id=' + this.f_gasbrand_id[0]
+        this.condition = args.condition
+        this.model.search(args.condition, args.model)
+      } else {
+        this.$showAlert(`请先选择气表品牌`, 'warning', 2000)
+      }
+      this.$refs.paged.$refs.grid.selectInit()
+      // this.isCheckAll = false
+    },
+    showparam (setable) {
+      this.setable = setable
+      if (!setable) {
+        this.map.clear()
+        this.user = []
+        // this.isCheckAll = false
+      }
+    },
+    search () {
+      this.$refs.paged.$refs.criteria.search()
+    },
+    mapset (array) {
+      this.map.clear()
+      for (let i = 0; i < array.length; i++) {
+        let userid = array[i].f_userfiles_id
+        let alias = array[i].f_alias
+        let userinfoid = array[i].f_userinfo_code
+        let f_orgname = array[i].f_orgname
+        let f_orgid = array[i].f_depid
+        let f_meternumber = array[i].f_meternumber
+        this.map.set(userid, {
+          id: null,
+          f_user_id: userid,
+          f_alias: alias,
+          f_userinfo_id: userinfoid,
+          f_orgname: f_orgname,
+          f_orgid: f_orgid,
+          f_meternumber: f_meternumber
+        })
+      }
+    },
+    back () {
+      this.$parent.msg = ''
+    },
+    clearmsg () {
+      this.$refs.paged.$refs.criteria.model = {}
+    },
+    clickshow () {
+      this.searchshow = !this.searchshow
+    },
+    getRes (obj) {
+      this.orgcondition = obj
+    },
+    // unCheckAll () {
+    //   let box = document.getElementsByName('opertioninput')
+    //   for (var i = 0; i < box.length; i++) {
+    //     box[i].checked = false
+    //   }
+    // },
+    // checkedALL () {
+    //   this.checked1 = !this.checked1
+    //   let box = document.getElementsByName('opertioninput')
+    //   for (var i = 0; i < box.length; i++) {
+    //     box[i].checked = this.checked1
+    //   }
+    // },
+    // checked (val) {
+    //   let userid = val.f_userfiles_id
+    //   if (this.map.has(userid)) {
+    //     this.map.delete(userid)
+    //     /* 遍历数组，然后根据选中的状态获取对应的下标，然后进行删除 */
+    //     for (let i = 0; i < this.user.length; i++) {
+    //       if (val.f_userfiles_id === this.user[i].f_userfiles_id) {
+    //         this.user.splice(i, 1)
+    //       }
+    //     }
+    //   } else {
+    //     this.user.push(val)
+    //     this.map.set(userid, {
+    //       id: null,
+    //       f_user_id: userid,
+    //       f_alias: val.f_alias,
+    //       f_userinfo_id: val.f_userinfo_id,
+    //       f_orgname: val.f_orgname,
+    //       f_orgid: val.f_orgid,
+    //       f_meternumber: val.f_meternumber
+    //     })
+    //   }
+    // },
+    showModal (val) {
+      this.val1 = val
+      this.isShowUserException = true
+    },
+    close () {
+      this.isShowUserException = false
+    }
+  },
+  computed: {
+    /* WarningType() {
+      return [{label: '全部', value: ''}, ...this.$appdata.getParam('气表品牌')]
+    }, */
+    /* Warningstyle() {
+      return [{label: '全部', value: ''}, ...this.$appdata.getParam('燃气表型号')]
+    }, */
+    Gasusertype () {
+      return [{label: '全部', value: ''}, ...this.$appdata.getParam('用户类型')]
+    },
+    Gasproperties () {
+      let rs = []
+      if (this.$refs.paged.$refs.criteria.model.f_user_type) {
+        rs = this.$appdata.getParam(this.$refs.paged.$refs.criteria.model.f_user_type[0])
+      }
+      return rs
+    },
+    parameterTypeList () {
+      return [{label: '全部', value: ''}, ...this.$appdata.getParam('设置参数')]
+    },
+    signtype1 () {
+      return [{label: '全部', value: ''}, ...this.$appdata.getParam('标记名称')]
+    },
+    parameterState () {
+      return [{label: '全部', value: ''}, ...this.$appdata.getParam('标记状态')]
+    },
+    userType () {
+      return [{label: '全部', value: ''}, ...this.$appdata.getParam('用户类型')]
+    },
+    userfilesState () {
+      return [{label: '全部', value: ''}, ...this.$appdata.getParam('上报状态')]
+    },
+    valvestate () {
+      return [{label: '全部', value: ''}, ...this.$appdata.getParam('阀门状态')]
+    },
+    instructState () {
+      return [{label: '全部', value: ''}, ...this.$appdata.getParam('指令状态')]
+    },
+    metertype () {
+      return this.$appdata.getParam('气表协议类型')
+    }
+  },
+  watch: {
+    'f_gasbrand_id' (val) {
+      if (val.length > 0) {
+        this.$refs.paged.$refs.criteria.model.f_gasbrand_id = val[0]
+        this.search()
+      }
+    }
+    // 'checked1' (val) {
+    //   if (val) {
+    //     this.user = this.model.rows
+    //     this.mapset(this.model.rows)
+    //   } else {
+    //     this.map.clear()
+    //     this.user = []
+    //   }
+    // }
+  }
+}
+</script>
+
+<style scoped>
+.PanelTR {
+  width: 100%;
+  height: 40px;
+}
+.dleft{
+  padding: 10px;background-color: #ffffff;border-radius: 14px;
+  box-shadow: 0px 1px 10px 0px rgba(2, 56, 104, 0.2);
+  padding: 10px;
+}
+.PanelTD {
+  width: 5%;
+}
+
+.btn-relative {
+  position: relative;
+  left: 25px;
+  top: 15px;
+}
+</style>