safecheck-client 4.0.0-60 → 4.0.0-63

package/src/filiale/jinhong/android/PhoneInsuranceRecordList.vue

@@ -1,346 +1,346 @@
-<template>
-  <div class="auto">
-    <criteria-paged :model="model" v-ref:paged>
-      <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:cri>
-        <div partial>
-          <form>
-            <div class="row app-row">
-              <div class="col-xs-5" style="margin-bottom: 6px">
-                <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
-                <span class="text-left font">客户编号</span>
-              </div>
-              <div class="col-xs-7">
-                <input class="form-control" v-model="model.f_userinfo_code" placeholder="请输入客户编号"
-                       condition="f_userinfo_code like '%{}%'" />
-              </div>
-            </div>
-            <div class="row app-row">
-              <div class="col-xs-5" style="margin-bottom: 6px">
-                <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
-                <span class="text-left font">客户姓名</span>
-              </div>
-              <div class="col-xs-7">
-                <input type="text" class="form-control" v-model="model.f_user_name" placeholder="请输入客户姓名"
-                       condition="f_user_name like '%{}%'" />
-              </div>
-            </div>
-            <div class="row app-row">
-              <div class="col-xs-5" style="margin-bottom: 6px">
-                <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
-                <span class="text-left font">客户电话</span>
-              </div>
-              <div class="col-xs-7">
-                <input type="text" class="form-control" v-model="model.f_user_phone" placeholder="请输入客户电话"
-                       condition="f_user_phone like '%{}%'" />
-              </div>
-            </div>
-            <div class="row app-row">
-              <div class="col-xs-5" style="margin-bottom: 6px">
-                <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
-                <span class="text-left font">客户地址</span>
-              </div>
-              <div class="col-xs-7">
-                <input type="text" class="form-control" v-model="model.f_address" placeholder="请输入客户地址"
-                       condition="f_address like '%{}%'" />
-              </div>
-            </div>
-            <div class="row app-row">
-              <div class="col-xs-5" style="margin-bottom: 6px">
-                <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
-                <span class="text-left font">操作日期开始</span>
-              </div>
-              <div class="col-xs-7">
-                <datepicker :value.sync="model.f_ins_start_date" v-model="model.f_ins_start_date" :format="'yyyy-MM-dd'"
-                            placeholder="投保日期开始" style="width: 100%" condition="f_operate_date >= '{}'">
-                </datepicker>
-              </div>
-            </div>
-            <div class="row app-row">
-              <div class="col-xs-5" style="margin-bottom: 6px">
-                <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
-                <span class="text-left font">操作日期结束</span>
-              </div>
-              <div class="col-xs-7">
-                <datepicker :value.sync="model.f_ins_end_date" v-model="model.f_ins_end_date" :format="'yyyy-MM-dd'"
-                            placeholder="投保日期结束" style="width: 100%" condition="f_operate_date <= '{}'">
-                </datepicker>
-              </div>
-            </div>
-            <div class="row app-row">
-              <div class="col-xs-5" style="margin-bottom: 6px">
-                <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
-                <span class="text-left font">操作人</span>
-              </div>
-              <div class="col-xs-7">
-                <v-select :value="model.f_operator" class="input-font" condition="f_operator = '{}'"
-                          :options='$parent.$parent.operators' :width="'100%'"
-                          v-model="model.f_operator" close-on-select clear-button></v-select>
-              </div>
-            </div>
-            <div class="row app-row">
-              <div class="col-xs-5" style="margin-bottom: 6px">
-                <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
-                <span class="text-left font">收费方式</span>
-              </div>
-              <div class="col-xs-7">
-                <v-select :value.sync="model.f_payment" class="input-font" condition="f_payment = '{}'"
-                          :options='$parent.$parent.payTypes' :width="'100%'"
-                          v-model="model.f_payment" close-on-select clear-button></v-select>
-              </div>
-            </div>
-            <div class="row app-row">
-              <div class="col-xs-5" style="margin-bottom: 6px">
-                <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
-                <span class="text-left font">保单号</span>
-              </div>
-              <div class="col-xs-7">
-                <input type="text" class="form-control" v-model="model.f_insurance_number" placeholder="请输入保单号"
-                       condition="f_insurance_number like '%{}%'" />
-              </div>
-            </div>
-            <div class="row text-center app-row">
-              <button type="button" class="btn btn-lg btn-font btn-color" style="width: 25%;"
-                      @click="$parent.$parent.search()">查询
-              </button>
-              <button type="button" class="btn btn-lg btn-font btn-color" style="width: 25%;"
-                      @click="$parent.$parent.clearCondition">清空
-              </button>
-            </div>
-          </form>
-        </div>
-
-      </criteria>
-      <list :model="model" partial='list' v-ref:list>
-        <div partial>
-          <div class="panel" style="padding: 10px 10px 5px 10px;">
-            <div class="panel-body panel-self">
-              <div class="row">
-                <p class="panel-title col-xs-3 text-left font">客户编号:</p>
-                <p class="panel-title col-xs-9 text-left input-font">{{ row.f_userinfo_code }}</p>
-              </div>
-              <div class="row">
-                <p class="panel-title col-xs-3 text-left font">客户名称:</p>
-                <p class="panel-title col-xs-9 text-left input-font">{{ row.f_user_name }}</p>
-              </div>
-              <div class="row">
-                <p class="panel-title col-xs-3 text-left font">客户地址:</p>
-                <p class="panel-title col-xs-9 text-left input-font">{{ row.f_address }}</p>
-              </div>
-              <div class="row">
-                <p class="panel-title col-xs-3 text-left font">客户电话:</p>
-                <p class="panel-title col-xs-9 text-left input-font">{{ row.f_user_phone }}</p>
-              </div>
-              <div class="row">
-                <p class="panel-title col-xs-3 text-left font">缴险金额:</p>
-                <p class="panel-title col-xs-9 text-left input-font">{{ row.f_money }}</p>
-              </div>
-              <div class="row">
-                <p class="panel-title col-xs-3 text-left font">保险险种:</p>
-                <p class="panel-title col-xs-9 text-left input-font">{{ row.f_insurance_type }}</p>
-              </div>
-              <div class="row">
-                <p class="panel-title col-xs-3 text-left font">保险类型:</p>
-                <p class="panel-title col-xs-9 text-left input-font">{{ row.f_fee_type }}</p>
-              </div>
-              <div class="row">
-                <p class="panel-title col-xs-3 text-left font">收费方式:</p>
-                <p class="panel-title col-xs-9 text-left input-font">{{ row.f_payment }}</p>
-              </div>
-              <div class="row">
-                <p class="panel-title col-xs-3 text-left font">开始时间:</p>
-                <p class="panel-title col-xs-9 text-left input-font">{{ row.f_ins_start_date }}</p>
-              </div>
-              <div class="row">
-                <p class="panel-title col-xs-3 text-left font">到期时间:</p>
-                <p class="panel-title col-xs-9 text-left input-font">{{ row.f_expiration_date }}</p>
-              </div>
-              <div class="row">
-                <p class="panel-title col-xs-3 text-left font">保单号:</p>
-                <p class="panel-title col-xs-9 text-left input-font">{{ row.f_insurance_number }}</p>
-              </div>
-              <div class="row">
-                <p class="panel-title col-xs-3 text-left font">操作人:</p>
-                <p class="panel-title col-xs-9 text-left input-font">{{ row.f_operator }}</p>
-              </div>
-              <div class="row">
-                <p class="panel-title col-xs-3 text-left font">备注:</p>
-                <p class="panel-title col-xs-9 text-left input-font">{{ row.f_comments }}</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </list>
-    </criteria-paged>
-  </div>
-</template>
-<script>
-
-import { HttpResetClass, PagedList } from 'vue-client'
-import Vue from 'vue'
-export default {
-  title: '保险登记',
-  props: ['data', 'tabname'],
-  data() {
-    return {
-      operators:[{label:'全部',value:'全部'}],
-      payTypes: [{label: '请选择', value: ''}, ...this.$appdata.getParam('付款方式')],
-      model: new PagedList(`${this.$androidUtil.getProxyUrl()}/api/af-revenue/sql/getInsuranceChargesList`, 20,
-        {
-          sort: `'asc'`
-        }
-      )
-    }
-  },
-  async ready() {
-    let dt = new Date()
-    let year = dt.getFullYear()
-    let month = dt.getMonth()-2
-    if(month<=0){
-      year = year -1
-      month = dt.getMonth()+10
-    }
-    let date = dt.getDate()
-    this.$refs.paged.$refs.cri.model.f_ins_start_date = year + '-' + (month<10? '0'+ month : month) + '-' + (date<10? '0'+ date : date)
-    this.initOperators()
-    this.$refs.paged.$refs.cri.model.f_operator = Vue.user.name
-  },
-  methods: {
-    initOperators(){
-      new HttpResetClass().load('POST', `/api/af-safecheck/sql/safe_singleTable_GroupBy`, {
-        data: {
-          items: 'f_operator',
-          tablename: 't_userfees',
-          condition: `1=1`,
-          groupitem: 'f_operator'
-        }
-      }, {resolveMsg: null, rejectMsg: null}).then(res => {
-        res.data.forEach(ress => {
-          this.operators.push({
-            label: ress.f_operator,
-            value: ress.f_operator
-          })
-        })
-      })
-    },
-    clearCondition() {
-      Object.keys(this.$refs.paged.$refs.cri.model).forEach((key) => {
-        this.$refs.paged.$refs.cri.model[key] = []
-      })
-    },
-    selfSearch(args) {
-      args.condition += ` and f_state != '无效'`
-      this.model.search(args.condition, args.model)
-    },
-    search() {
-      this.$refs.paged.$refs.cri.search()
-    },
-
-  },
-  events: {
-
-  },
-  watch: {
-
-  }
-}
-</script>
-<style>
-.bg {
-  background-color: blue;
-  height: 1px;
-  border: 0;
-}
-
-.app-row {
-  background-color: white;
-  padding: 10px 10px 0 10px;
-  border-bottom: 1px solid rgba(235, 235, 235, 0.5);
-}
-
-.search_input {
-  border: 0;
-  outline: none;
-}
-
-.font {
-  font: 15px PingFang-SC-Medium;
-  color: #666666;
-}
-
-.input-font {
-  font: 15px PingFang-SC-Medium;
-  color: #333333;
-}
-
-.btn-font {
-  font: 600 16px PingFang-SC-Bold;
-  color: #499EDF;
-}
-
-.btn-color {
-  background-color: #FFFFFF;
-  border-radius: 10px;
-  border: 1px solid #499EDF;
-}
-
-.app-text {
-  font-size: 12px;
-}
-
-.panel-self {
-  border-radius: 10px;
-  border: 1px solid #499EDF;
-  background-color: #F8F8F8;
-}
-
-.yybtn-color {
-  background-color: #499edf;
-  border-radius: 4px;
-  border: 1px solid #499EDF;
-  color: #FFFFFF;
-  font: 14px PingFang-SC-Bold;
-}
-
-.qxbtn-color {
-  background-color: #FFFFFF;
-  border-radius: 4px;
-  color: #499edf;
-  font: 14px PingFang-SC-Bold;
-  border: 1px solid #499EDF;
-}
-
-.sort-caret {
-  display: inline-block;
-  width: 0;
-  height: 0;
-  border: 0;
-  content: "";
-  position: absolute;
-  left: 3px;
-  z-index: 2;
-}
-
-.descending {
-  bottom: -30px;
-  border-top: 5px solid #97a8be;
-  border-bottom: none;
-  border-right: 5px solid transparent;
-  border-left: 5px solid transparent;
-}
-
-.ascending {
-  border-right: 5px solid transparent;
-  border-left: 5px solid transparent;
-  top: 9px;
-  border-top: none;
-  border-bottom: 5px solid #97a8be;
-}
-
-.ascend .ascending {
-  border-bottom-color: #48576a;
-}
-
-.descend .descending {
-  border-top-color: #48576a;
-}
-</style>
+<template>
+  <div class="auto">
+    <criteria-paged :model="model" v-ref:paged>
+      <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:cri>
+        <div partial>
+          <form>
+            <div class="row app-row">
+              <div class="col-xs-5" style="margin-bottom: 6px">
+                <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
+                <span class="text-left font">客户编号</span>
+              </div>
+              <div class="col-xs-7">
+                <input class="form-control" v-model="model.f_userinfo_code" placeholder="请输入客户编号"
+                       condition="f_userinfo_code like '%{}%'" />
+              </div>
+            </div>
+            <div class="row app-row">
+              <div class="col-xs-5" style="margin-bottom: 6px">
+                <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
+                <span class="text-left font">客户姓名</span>
+              </div>
+              <div class="col-xs-7">
+                <input type="text" class="form-control" v-model="model.f_user_name" placeholder="请输入客户姓名"
+                       condition="f_user_name like '%{}%'" />
+              </div>
+            </div>
+            <div class="row app-row">
+              <div class="col-xs-5" style="margin-bottom: 6px">
+                <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
+                <span class="text-left font">客户电话</span>
+              </div>
+              <div class="col-xs-7">
+                <input type="text" class="form-control" v-model="model.f_user_phone" placeholder="请输入客户电话"
+                       condition="f_user_phone like '%{}%'" />
+              </div>
+            </div>
+            <div class="row app-row">
+              <div class="col-xs-5" style="margin-bottom: 6px">
+                <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
+                <span class="text-left font">客户地址</span>
+              </div>
+              <div class="col-xs-7">
+                <input type="text" class="form-control" v-model="model.f_address" placeholder="请输入客户地址"
+                       condition="f_address like '%{}%'" />
+              </div>
+            </div>
+            <div class="row app-row">
+              <div class="col-xs-5" style="margin-bottom: 6px">
+                <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
+                <span class="text-left font">操作日期开始</span>
+              </div>
+              <div class="col-xs-7">
+                <datepicker :value.sync="model.f_ins_start_date" v-model="model.f_ins_start_date" :format="'yyyy-MM-dd'"
+                            placeholder="投保日期开始" style="width: 100%" condition="f_operate_date >= '{}'">
+                </datepicker>
+              </div>
+            </div>
+            <div class="row app-row">
+              <div class="col-xs-5" style="margin-bottom: 6px">
+                <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
+                <span class="text-left font">操作日期结束</span>
+              </div>
+              <div class="col-xs-7">
+                <datepicker :value.sync="model.f_ins_end_date" v-model="model.f_ins_end_date" :format="'yyyy-MM-dd'"
+                            placeholder="投保日期结束" style="width: 100%" condition="f_operate_date <= '{}'">
+                </datepicker>
+              </div>
+            </div>
+            <div class="row app-row">
+              <div class="col-xs-5" style="margin-bottom: 6px">
+                <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
+                <span class="text-left font">操作人</span>
+              </div>
+              <div class="col-xs-7">
+                <v-select :value="model.f_operator" class="input-font" condition="f_operator = '{}'"
+                          :options='$parent.$parent.operators' :width="'100%'"
+                          v-model="model.f_operator" close-on-select clear-button></v-select>
+              </div>
+            </div>
+            <div class="row app-row">
+              <div class="col-xs-5" style="margin-bottom: 6px">
+                <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
+                <span class="text-left font">收费方式</span>
+              </div>
+              <div class="col-xs-7">
+                <v-select :value.sync="model.f_payment" class="input-font" condition="f_payment = '{}'"
+                          :options='$parent.$parent.payTypes' :width="'100%'"
+                          v-model="model.f_payment" close-on-select clear-button></v-select>
+              </div>
+            </div>
+            <div class="row app-row">
+              <div class="col-xs-5" style="margin-bottom: 6px">
+                <img src="../../../assets/add.png" style="width: 20px;margin-bottom: 5px" alt="">
+                <span class="text-left font">保单号</span>
+              </div>
+              <div class="col-xs-7">
+                <input type="text" class="form-control" v-model="model.f_insurance_number" placeholder="请输入保单号"
+                       condition="f_insurance_number like '%{}%'" />
+              </div>
+            </div>
+            <div class="row text-center app-row">
+              <button type="button" class="btn btn-lg btn-font btn-color" style="width: 25%;"
+                      @click="$parent.$parent.search()">查询
+              </button>
+              <button type="button" class="btn btn-lg btn-font btn-color" style="width: 25%;"
+                      @click="$parent.$parent.clearCondition">清空
+              </button>
+            </div>
+          </form>
+        </div>
+
+      </criteria>
+      <list :model="model" partial='list' v-ref:list>
+        <div partial>
+          <div class="panel" style="padding: 10px 10px 5px 10px;">
+            <div class="panel-body panel-self">
+              <div class="row">
+                <p class="panel-title col-xs-3 text-left font">客户编号:</p>
+                <p class="panel-title col-xs-9 text-left input-font">{{ row.f_userinfo_code }}</p>
+              </div>
+              <div class="row">
+                <p class="panel-title col-xs-3 text-left font">客户名称:</p>
+                <p class="panel-title col-xs-9 text-left input-font">{{ row.f_user_name }}</p>
+              </div>
+              <div class="row">
+                <p class="panel-title col-xs-3 text-left font">客户地址:</p>
+                <p class="panel-title col-xs-9 text-left input-font">{{ row.f_address }}</p>
+              </div>
+              <div class="row">
+                <p class="panel-title col-xs-3 text-left font">客户电话:</p>
+                <p class="panel-title col-xs-9 text-left input-font">{{ row.f_user_phone }}</p>
+              </div>
+              <div class="row">
+                <p class="panel-title col-xs-3 text-left font">缴险金额:</p>
+                <p class="panel-title col-xs-9 text-left input-font">{{ row.f_money }}</p>
+              </div>
+              <div class="row">
+                <p class="panel-title col-xs-3 text-left font">保险险种:</p>
+                <p class="panel-title col-xs-9 text-left input-font">{{ row.f_insurance_type }}</p>
+              </div>
+              <div class="row">
+                <p class="panel-title col-xs-3 text-left font">保险类型:</p>
+                <p class="panel-title col-xs-9 text-left input-font">{{ row.f_fee_type }}</p>
+              </div>
+              <div class="row">
+                <p class="panel-title col-xs-3 text-left font">收费方式:</p>
+                <p class="panel-title col-xs-9 text-left input-font">{{ row.f_payment }}</p>
+              </div>
+              <div class="row">
+                <p class="panel-title col-xs-3 text-left font">开始时间:</p>
+                <p class="panel-title col-xs-9 text-left input-font">{{ row.f_ins_start_date }}</p>
+              </div>
+              <div class="row">
+                <p class="panel-title col-xs-3 text-left font">到期时间:</p>
+                <p class="panel-title col-xs-9 text-left input-font">{{ row.f_expiration_date }}</p>
+              </div>
+              <div class="row">
+                <p class="panel-title col-xs-3 text-left font">保单号:</p>
+                <p class="panel-title col-xs-9 text-left input-font">{{ row.f_insurance_number }}</p>
+              </div>
+              <div class="row">
+                <p class="panel-title col-xs-3 text-left font">操作人:</p>
+                <p class="panel-title col-xs-9 text-left input-font">{{ row.f_operator }}</p>
+              </div>
+              <div class="row">
+                <p class="panel-title col-xs-3 text-left font">备注:</p>
+                <p class="panel-title col-xs-9 text-left input-font">{{ row.f_comments }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </list>
+    </criteria-paged>
+  </div>
+</template>
+<script>
+
+import { HttpResetClass, PagedList } from 'vue-client'
+import Vue from 'vue'
+export default {
+  title: '保险登记',
+  props: ['data', 'tabname'],
+  data() {
+    return {
+      operators:[{label:'全部',value:'全部'}],
+      payTypes: [{label: '请选择', value: ''}, ...this.$appdata.getParam('付款方式')],
+      model: new PagedList(`${this.$androidUtil.getProxyUrl()}/api/af-revenue/sql/getInsuranceChargesList`, 20,
+        {
+          sort: `'asc'`
+        }
+      )
+    }
+  },
+  async ready() {
+    let dt = new Date()
+    let year = dt.getFullYear()
+    let month = dt.getMonth()-2
+    if(month<=0){
+      year = year -1
+      month = dt.getMonth()+10
+    }
+    let date = dt.getDate()
+    this.$refs.paged.$refs.cri.model.f_ins_start_date = year + '-' + (month<10? '0'+ month : month) + '-' + (date<10? '0'+ date : date)
+    this.initOperators()
+    this.$refs.paged.$refs.cri.model.f_operator = Vue.user.name
+  },
+  methods: {
+    initOperators(){
+      new HttpResetClass().load('POST', `/api/af-safecheck/sql/safe_singleTable_GroupBy`, {
+        data: {
+          items: 'f_operator',
+          tablename: 't_userfees',
+          condition: `1=1`,
+          groupitem: 'f_operator'
+        }
+      }, {resolveMsg: null, rejectMsg: null}).then(res => {
+        res.data.forEach(ress => {
+          this.operators.push({
+            label: ress.f_operator,
+            value: ress.f_operator
+          })
+        })
+      })
+    },
+    clearCondition() {
+      Object.keys(this.$refs.paged.$refs.cri.model).forEach((key) => {
+        this.$refs.paged.$refs.cri.model[key] = []
+      })
+    },
+    selfSearch(args) {
+      args.condition += ` and f_state != '无效'`
+      this.model.search(args.condition, args.model)
+    },
+    search() {
+      this.$refs.paged.$refs.cri.search()
+    },
+
+  },
+  events: {
+
+  },
+  watch: {
+
+  }
+}
+</script>
+<style>
+.bg {
+  background-color: blue;
+  height: 1px;
+  border: 0;
+}
+
+.app-row {
+  background-color: white;
+  padding: 10px 10px 0 10px;
+  border-bottom: 1px solid rgba(235, 235, 235, 0.5);
+}
+
+.search_input {
+  border: 0;
+  outline: none;
+}
+
+.font {
+  font: 15px PingFang-SC-Medium;
+  color: #666666;
+}
+
+.input-font {
+  font: 15px PingFang-SC-Medium;
+  color: #333333;
+}
+
+.btn-font {
+  font: 600 16px PingFang-SC-Bold;
+  color: #499EDF;
+}
+
+.btn-color {
+  background-color: #FFFFFF;
+  border-radius: 10px;
+  border: 1px solid #499EDF;
+}
+
+.app-text {
+  font-size: 12px;
+}
+
+.panel-self {
+  border-radius: 10px;
+  border: 1px solid #499EDF;
+  background-color: #F8F8F8;
+}
+
+.yybtn-color {
+  background-color: #499edf;
+  border-radius: 4px;
+  border: 1px solid #499EDF;
+  color: #FFFFFF;
+  font: 14px PingFang-SC-Bold;
+}
+
+.qxbtn-color {
+  background-color: #FFFFFF;
+  border-radius: 4px;
+  color: #499edf;
+  font: 14px PingFang-SC-Bold;
+  border: 1px solid #499EDF;
+}
+
+.sort-caret {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border: 0;
+  content: "";
+  position: absolute;
+  left: 3px;
+  z-index: 2;
+}
+
+.descending {
+  bottom: -30px;
+  border-top: 5px solid #97a8be;
+  border-bottom: none;
+  border-right: 5px solid transparent;
+  border-left: 5px solid transparent;
+}
+
+.ascending {
+  border-right: 5px solid transparent;
+  border-left: 5px solid transparent;
+  top: 9px;
+  border-top: none;
+  border-bottom: 5px solid #97a8be;
+}
+
+.ascend .ascending {
+  border-bottom-color: #48576a;
+}
+
+.descend .descending {
+  border-top-color: #48576a;
+}
+</style>