centaline-data-driven 1.1.23 → 1.1.24

package/src/centaline/dynamicDetail/src/dynamicPropertyDetailRET.vue

@@ -0,0 +1,29 @@
+<template>
+    <div>22222222222222222222222</div>
+</template>
+
+
+<script>
+  export default {
+    name: 'ct-PropertyDetail',
+    props: {
+      vmodel: Object,
+      api: String
+    },
+    data() {
+      return {
+        model:null
+      }
+    },
+    created() {
+      this.model = this.vmodel;
+    },
+    methods: {
+    }
+  }
+</script>
+<style>
+  
+</style>
+
+

package/src/centaline/dynamicForm/src/dynamicForm.vue

@@ -1,9 +1,9 @@
 <template>
   <div v-loading="loading" style="width:100%">
-    <div v-if="model !== null && !loading" class="ct-form">
+    <div v-if="model !== null && !loading" class="ct-form"  :class="{'tableDisabled':model.pageDisabled}">
       <!--可根据场景判断显示el-card还是el-main-->
-      <component :is="showTitle?'el-card':'el-main'">
-        <div slot="header" class="clearfix" v-if="typeof model.title !== 'undefined' && showTitle">
+      <component :is="model.showTitle?'el-main':'el-card'">
+        <div slot="header" class="clearfix" v-if="typeof model.title !== 'undefined' && model.flagShowTitle">
           <span style="font-weight:bold">{{model.title}}</span>
         </div>
         <!--头部元素-->
@@ -93,7 +93,7 @@
       parentModel: Object,
       showTitle: {
         type: Boolean,
-        default: true
+        default: false
       }
     },
     data() {
@@ -136,7 +136,7 @@
         this.$emit('failLoad', this.model);
       },
       load(data) {
-        this.$set(this, 'model', data)
+        this.$set(this, 'model', data);
         this.model.self = this;
         if (typeof this.model.scripts !== 'undefined') {
           this.model.scripts.formData = this.model.formData;
@@ -234,9 +234,10 @@
 
               if (verified) {
                 //action有值，提交到后台
-                if (field.action) {
+                if (field.action) {                 
                   field.disabled = true;//提交按钮禁用
-                  field.doAction(self.model.getFormObj(), (data) => {
+                  self.model.pageDisabled= true;
+                  field.doAction(self.getFormObj(), (data) => {
                     if (data.rtnCode === 200) {
                       if (self.model.flagAlertClose) {
                         self.$common.confirm('操作成功，是否关闭本页面?', '提示', {
@@ -262,7 +263,8 @@
                         self.parentModel.$vue.closeTabThen(data);
                       }
                     }
-                    field.disabled = false;
+                    field.disabled = false;                    
+                    self.model.pageDisabled= false;
                   });
                 }
                 //无值，触发submit事件
@@ -507,9 +509,23 @@
             f.self.resize();
           }
         });
-      }
+      },
+      getFormObj()
+      {
+        let formData=this.model.getFormObj();
+        if(this.$route.query.pageStyle)
+        {
+           return Object.assign(formData,{'pageStyle':this.$route.query.pageStyle});
+        }
+        return formData;
+      },
+     
     }
   }
 </script>
 <style>
+.tableDisabled {
+    pointer-events: none;
+    opacity:0.4;
+  }
 </style>

package/src/centaline/dynamicForm/src/dynamicFormList.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="ct-form-list" :class="model.attrs.size?'ct-form-list-'+model.attrs.size:''">
-    <div style="padding-bottom:5px;text-align:right">
-      <el-button type="success" size="mini" icon="el-icon-circle-plus-outline" @click="addRow">新增</el-button>
+    <div style="padding-bottom:5px;text-align:right" class=" max-btn-add">
+      <el-button type="success" size="mini" class="max-btn-add" icon="el-icon-circle-plus-outline" @click="addRow">新增</el-button>
     </div>
     <div style="position:relative">
       <div style="width:100%;overflow:auto;">

package/src/centaline/dynamicForm/src/dynamicFormListTable.vue

@@ -1,18 +1,25 @@
 <template>
-  <div class="ct-form-list" v-focus="foucus">
+  <div class="ct-form-list" v-focus="foucus" :class="{'tableDisabled':model.tableDisabled}">
     <div class="list-title">
       <h5>{{model.title}}</h5>
     </div>
-    <div class="list-button">
-      <el-button v-if="model.create" type="success" size="mini" icon="el-icon-circle-plus-outline" @click="addRow">新增</el-button>
+    <div class="list-button max-btn-add">
+      <el-button v-if="model.create" type="success" size="mini" icon="el-icon-circle-plus-outline" @click="addRow">
+        新增
+      </el-button>
     </div>
 
     <div id="listTable">
       <el-row>
         <el-col :span="24">
-          <el-table size="mini" :data="model.tableData" border style="width: 100%" highlight-current-row :show-summary="model.showSummary" :summary-method="getSummaries">
+          <el-table size="mini" class="max-table--border" :data="model.tableData" :key="itemKey" border style="width: 100%" highlight-current-row :show-summary="model.showSummary" :summary-method="getSummaries">
             <!--数据列-->
             <el-table-column v-for="(v,i) in model.rows[0].field" :key="i" :prop="v.id" :label="v.label" v-if="v.show !== false" header-align="center">
+              <template slot="header" slot-scope="scope">
+                <div class="cell" :class="{'ct-table-required':v.required&&model.rows[0].edit&& model.rows[0].delete&&!model.tableDisabled}">
+                  {{v.label}}
+                </div>
+              </template>
               <template slot-scope="scope">
                 <span v-if="scope.row.isSet">
                   <!--<component v-if ref="Fields" :is="v.is" :vmodel="scope.row[v.id]" :api="model.OptApi"></component>-->
@@ -83,6 +90,7 @@
       return {
         model: null,
         foucus: false,
+        itemKey: Math.random()
       }
     },
     created() {
@@ -156,7 +164,7 @@
 
               row.isSet = false;
               app.model.currentRow.isSet = false;
-
+              app.itemKey = Math.random();
               this.model.change = this.model.formListChange;
               app.$emit('change');
             }
@@ -328,12 +336,14 @@
     display: flex;
     line-height: 34px;
   }
+
   .ct-form-list .list-title {
     padding-bottom: 5px;
     text-align: left;
     display: inline-table;
     width: 45%;
   }
+
   .ct-form-list .list-button {
     padding-bottom: 5px;
     text-align: right;
@@ -341,13 +351,24 @@
     display: inline-table;
     float: right;
   }
+
   .ct-table-inputnumber {
-    text-align:right;
+    text-align: right;
   }
+
   .ct-form-list .el-table__footer-wrapper .el-table__footer .has-gutter div {
     text-align: right;
   }
+
   .ct-form-list .el-table__footer-wrapper .el-table__footer .has-gutter tr td:first-child div {
     text-align: left;
   }
+
+  .ct-table-required {
+    color: red;
+  }
+  .tableDisabled {
+    pointer-events: none;
+    opacity:0.4;
+  }
 </style>

package/src/centaline/dynamicHyperLink/index.js

@@ -8,4 +8,4 @@ if (typeof window !== 'undefined' && window.Vue) {
   window.Vue.use(dynamicHyperLink);
 }
 
-export default dynamicHyperLink
+export default dynamicHyperLink

package/src/centaline/dynamicPlaceHolder/index.js

@@ -8,4 +8,4 @@ if (typeof window !== 'undefined' && window.Vue) {
   window.Vue.use(dynamicPlaceHolder);
 }
 
-export default dynamicPlaceHolder
+export default dynamicPlaceHolder

package/src/centaline/dynamicSearchList/src/dynamicSearchList.vue

@@ -1,7 +1,13 @@
 <template>
-  <div class="ct-search-list" :style="searchListStyle">
-    <ct-searchscreen ref="screen" :api="searchConditionApi" @loaded="screenLoaded" :screenPara="apiParam" @search="search()"></ct-searchscreen>
-    <ct-searchtable ref="table" :api="searchDataApi" @toolbarClick="toolbarClickHandler" @refreshParent="refreshParentHandler"></ct-searchtable>
+  <div class="ct-search-list" :style="searchListStyle"> 
+    <div slot="header" class="clearfix" v-if="typeof title !== 'undefined' && showTitle">
+          <span style="font-weight:bold">{{title}}</span>
+    </div>
+    <ct-searchscreen ref="screen" :api="searchConditionApi" @loaded="screenLoaded" :screenPara="apiParam" @search="search()" @showTitle="showTitleScreenHandler"></ct-searchscreen>
+    <ct-searchtable ref="table" :api="searchDataApi" :searchDataStatisticsApi="searchDataStatisticsApi" 
+    @toolbarClick="toolbarClickHandler" 
+    @refreshParent="refreshParentHandler" 
+    @showTitle="showTitleHandler"></ct-searchtable>
   </div>
 </template>
 <script>
@@ -21,11 +27,12 @@
       vmodel: Object,
       searchConditionApi: String,
       searchDataApi: String,
+      searchDataStatisticsApi: String,
       pageHeight: String,
       apiParam: {
         type: Object,
         default: () => { }
-      }
+      },
     },
     created() {
       this.model = this.vmodel;
@@ -43,7 +50,9 @@
         loaded: {
           screenLoaded: false,
           tableLoaded: false
-        }
+        },
+        title:'',
+        showTitle:false,
       }
     },
     methods: {
@@ -73,7 +82,19 @@
       },
       resize() {
         this.$refs.table.setTableHeight();
-      }
+      },
+      showTitleHandler() {
+        if (this.$refs.table.model && this.$refs.table.model.flagShowTitle) {
+          this.title=this.$refs.table.model.title;
+          this.showTitle=this.$refs.table.model.flagShowTitle;
+        }
+      },
+      showTitleScreenHandler() {
+        if (this.$refs.screen.model && this.$refs.screen.model.flagShowTitle) {
+          this.title=this.$refs.screen.model.title;
+          this.showTitle=this.$refs.screen.model.flagShowTitle;
+        }
+      },
     }
   }
 </script>

package/src/centaline/dynamicSearchList/src/dynamicSearchScreen.vue

@@ -18,7 +18,7 @@
           <component v-for="(col, index) in model.btnScreen" :key="index" :is="col.is" :vmodel="col" :api="model.optionApi" @click="clickHandler(col)"></component>
         </el-col>
       </el-row>-->
-      <el-popover class="SeachScreenPop" placement="top" transition="el-zoom-in-top" v-model="highScreen" trigger="click" visible-arrow="false">
+      <el-popover class="SeachScreenPop max-seachpopper" placement="top" transition="el-zoom-in-top" v-model="highScreen" trigger="click" visible-arrow="false">
         <div style="width:100%">
           <!--<el-row v-if="highScreenRow.length > 0">
             <el-col v-for="(col, index) in highScreenRow" :key="index" :span="col.colspan" style="padding:10px" v-if="col.show !== false">
@@ -78,6 +78,14 @@
         switch (model.action) {
           case 'showHigh':
             this.$set(this, 'highScreen', !this.highScreen);
+            //高级搜索需要切换icon样式
+            if(model.icon==='max-open')
+            {
+              model.icon='max-fold'
+            }else
+            {
+              model.icon='max-open'
+            }
             break;
           case 'search':
             this.$emit('search', this.model);
@@ -147,6 +155,7 @@
         self.setScreenShow();
         self.isLoading = false;
         self.$emit('loaded', self.model.defaultSearch);
+        self.$emit('showTitle');
       }
     }
   }

package/src/centaline/dynamicSearchList/src/dynamicSearchTable.vue

@@ -1,11 +1,12 @@
 <template>
   <div style="width:100%;" class="ct-searchtable" ref="searchTable">
+    <ct-tableStatistics ref="listHeader" class="ct-search-table-list-header" :tip="model.listHeader" v-if="!isLoading && searchDataStatisticsApi"></ct-tableStatistics>
     <ct-tabletoolbar ref="toolbar" v-if="!isLoading" :buttons="model.buttons"
                      @click="toolbarClickHandler($event)"
                      @importComplete="importComplete"
+                     :optionApi="model.optionApi"
                      :searchModel="model.searchModel"></ct-tabletoolbar>
     <ct-tabletip ref="listHeader" class="ct-search-table-list-header" :tip="model.listHeader" v-if="!isLoading"></ct-tabletip>
-
     <div v-loading="tableLoading" v-if="!isLoading" :style="{'height':'0px','top':model.tableHeight*0.55+'px'}">
     </div>
     <div v-loading="operationLoading">
@@ -16,13 +17,13 @@
          @keydown.up="rowKeyDownHandle($event,0)" @keydown.down="rowKeyDownHandle($event,1)"
          tabindex="-1">
       <div class="ct-table-content">
-        <table border="0" cellpadding="0" cellspacing="0" 
+        <table border="0" cellpadding="0" cellspacing="0"
                :class="['ct-table',model.attrs.size?'ct-table-'+model.attrs.size:'']">
           <!--表头-->
           <thead ref="tableHead">
             <tr class="ct-tr" ref="headTr" v-for="(columns,columnsIndex) in model.columnsArr">
               <th v-if="model.isMulti && columnsIndex === 0" ref="headLeftThs" class="ct-td left-fixation-th checkbox-td">
-                <input type="checkbox" @click="selectAll($event)" v-model="model.selectAll" class="checkbox-td-1"/>
+                <input type="checkbox" @click="selectAll($event)" v-model="model.selectAll" class="checkbox-td-1" />
               </th>
               <th :ref="column.fixed?(column.fixed==='left'?'headLeftThs':'headRightThs'):'headThs'" v-for="(column,colIndex) in columns"
                   v-if="column.show" class="ct-td ct-searchtable-th"
@@ -34,8 +35,7 @@
                   column.fixed === 'left'?'left-fixation-th':null,
                   column.fixed === 'right'?'right-fixation-th':null,
                   typeof column.fixed === 'undefined'?'right-no-fixation-th':null]"
-                  @mousemove="thMouseMoveHandle($event)" @mousedown="thMouseDownHandle($event,colIndex)"
-                  align="center"
+                  @mousemove="thMouseMoveHandle($event)" @mousedown="thMouseDownHandle($event,colIndex)"                 
                   v-bind="column.attrs">
 
                 <span>{{column.name}}</span>
@@ -54,14 +54,13 @@
           <tbody>
             <!--这一行仅用于设置未加载数据时的列宽-->
             <!--<tr v-if="model.listData.length === 0" class="ct-tr" style="visibility: hidden;">
-              <td v-if="model.isMulti">
-              </td>
-              <td v-for="(column,colIndex) in model.dataFieldcolumns" class="ct-td" v-if="column.show">
-                <div :style="{'width': column.width + 'px'}">
-                </div>
-              </td>
-            </tr>-->
-
+            <td v-if="model.isMulti">
+            </td>
+            <td v-for="(column,colIndex) in model.dataFieldcolumns" class="ct-td" v-if="column.show">
+              <div :style="{'width': column.width + 'px'}">
+              </div>
+            </td>
+          </tr>-->
             <!--可视区域的行数据-->
             <tr v-for="(row,rowindex) in model.listData"
                 v-if="pageRowMin <= rowindex && rowindex <= pageRowMax"
@@ -69,7 +68,7 @@
                 class="ct-tr"
                 :style="row.$style">
               <td v-if="model.isMulti" class="ct-td tdFiexd left-fixation checkbox-td" align="center">
-                <input v-if="!model.rightMulti || row[model.rightMulti] == 1" type="checkbox" v-model="row.$select"  @change="selectOne($event)"  class="checkbox-td-1"/>
+                <input v-if="!model.rightMulti || row[model.rightMulti] == 1" type="checkbox" v-model="row.$select" @change="selectOne($event)" class="checkbox-td-1" />
               </td>
               <td :ref="column.fixed?(column.fixed==='left'?'headLeftTds':'headRightTds'):null"
                   v-for="(column,colIndex) in model.dataFieldcolumns"
@@ -90,7 +89,7 @@
                 </div>
 
                 <!--可点击的列-->
-                <ct-tablecurrency v-else-if="column.router" :class="column.autoRowHeight ? 'lineFeedCell':'cell'" :router="column.router" :colValue="row[column.id]" :rowData="row"
+                <ct-tablecurrency v-else-if="column.router" :align="column.attrs.align" :class="column.autoRowHeight ? 'lineFeedCell':'cell'" :router="column.router" :colValue="row[column.id]" :rowData="row"
                                   @click="rolRouterClickHandler">
                 </ct-tablecurrency>
 
@@ -108,6 +107,8 @@
               </td>
             </tr>
 
+
+
             <!--适配滚动条-->
             <tr v-else v-bind:style="{ height: row.$heigth + 'px' }"></tr>
           </tbody>
@@ -124,17 +125,20 @@
 <script>
   import dynamicElement from '../../mixins/dynamicElement';
   import dynamicTableTip from './dynamicTableTip.vue';
-  import dynamicTableToolbar from './dynamicTableToolbar.vue'
+  import dynamicTableToolbar from './dynamicTableToolbar.vue';
+  import dynamicTableStatistics from './dynamicTableStatistics.vue';
   export default {
     name: 'ct-searchtable',
     mixins: [dynamicElement],
     components: {
       'ct-tabletip': dynamicTableTip,
-      'ct-tabletoolbar': dynamicTableToolbar
+      'ct-tabletoolbar': dynamicTableToolbar,
+      'ct-tableStatistics': dynamicTableStatistics
     },
     props: {
       vmodel: Object,
-      api: String
+      api: String,
+      searchDataStatisticsApi: String
     },
     computed: {
     },
@@ -165,6 +169,7 @@
     },
     activated() {
       this.$nextTick(() => {
+        this.calculatingRowHeight();
         this.setTableHeight();
       })
     },
@@ -191,9 +196,14 @@
         self.$forceUpdate();
 
         self.$emit('loaded');
+        self.$emit('showTitle');
         if (this.tempSearchModel !== null) {
           self.model.searchModel = this.tempSearchModel;
         }
+        //自动查询 调用合并列
+        if (self.model.rowMergedColumns.length > 0 && self.model.listData.length > 0) {
+          self.model.setRow(self.model.listData);
+        }
         self.tableComplate = true;
         this.setTableHeight();
         this.$nextTick(() => {
@@ -312,8 +322,8 @@
                 self.tableLoading = false;
                 self.rowColorChange();
                 self.resetScroll();
-                self.getScrollAttr();
                 self.calculatingRowHeight();
+                self.getScrollAttr();
               }
               self.setfixedSize();
             });
@@ -398,6 +408,9 @@
       },
       getScrollAttr(e) {
         if (typeof this.$refs.tableParent !== 'undefined' && typeof this.$refs.headThs !== 'undefined') {
+
+          this.calculatingRowHeight();
+
           var scrollTop = this.$refs.tableParent.scrollTop;
           var scrollLeft = this.$refs.tableParent.scrollLeft;
           var scrollRight = this.$refs.tableParent.scrollWidth - scrollLeft - this.$refs.tableParent.clientWidth;
@@ -426,7 +439,6 @@
       setTrLazyLoading() {
         this.pageRowMax = this.firstRow + this.displayRowNumber;
         this.pageRowMin = this.firstRow - this.displayRowNumber;
-
         if (this.pageRowMin > 0 && this.model.listData[this.pageRowMin].$rowspan === 0) {
           for (let i = this.pageRowMin; i >= 0; i--) {
             if (this.model.listData[i].$rowspan > 0) {
@@ -469,8 +481,8 @@
             var h4 = this.$refs.footer.$el.offsetHeight | 0;
             var h5 = this.$refs.listHeader.$el.offsetHeight | 0;
             var h6 = this.$refs.listFooter.$el.offsetHeight | 0;
-            let tableHeight = h1 - h2 - h3 - h4 - h5 - h6 - 10;
-
+            let tableHeight = h1 - h2 - h3 - h4 - h5 - h6 - 30;
+            console.log(h1);
             this.model.tableHeight = tableHeight < 50 ? 350 : tableHeight;
             this.$nextTick(() => {
               self.getScrollAttr();
@@ -577,7 +589,6 @@
         });
       },
       toolbarClickHandler(field) {
-        debugger;
         let self = this;
         let submitData = {};
         let action = field.action;
@@ -636,6 +647,10 @@
           if (!field.isClientFuntion) {
             if (field.isFormPageInTab || field.isSearchPageInTab) {// 外部框架tab页打开
               submitData = field.getActionPara(submitData).para;
+               if(field.pageStyle)
+              {
+                 submitData.pageStyle=field.pageStyle;
+              }
               self.$common.getDataDrivenOpts().handler.openTab(action, submitData, field.pageTitle, self.model);
             }
             else if (field.isBrowserNewTab) {// 浏览器打开
@@ -776,12 +791,19 @@
       calculatingRowHeight() {
         let self = this;
         let count = 0;
-
-        self.model.listData.forEach((v, i) => {
-          if (typeof v.$heigth === "undefined" && self.$refs["rows." + i] && self.$refs["rows." + i].length > 0) {
-            self.$set(v, "$heigth", self.$refs["rows." + i][0].clientHeight);
-          }
-        });
+      
+        //查询出所有没有设置$heigth的数据并重新设置$heigth
+       let notHeigthData=  self.model.listData.filter(item=>{
+           return item.$heigth=== undefined || item.$heigth<=0
+        })
+        if(notHeigthData&&notHeigthData.length>0)
+        {
+           notHeigthData.forEach((v, i) => {
+           if (self.$refs["rows." + i] && self.$refs["rows." + i].length > 0) {
+              self.$set(v, "$heigth", self.$refs["rows." + i][0].clientHeight);
+            }
+          });
+        }
 
         //for (let i = 0; i < self.model.listData.length; i++) {
         //  if (self.$refs[]) {
@@ -856,9 +878,9 @@
   .ct-searchtable .ct-tr > .ct-td {
     /*border: 1px solid #e7e8eb;*/
     border-bottom: 1px solid #e7e8eb;
-    /*border-right: 1px solid #e7e8eb;*/
-    border-left: 1px solid #e7e8eb;
-    padding: 2px 10px;
+    /*border-right: 1px solid #e7e8eb;
+    border-left: 1px solid #e7e8eb;*/
+    padding: 2px 20px;
     cursor: default;
     background-color: #ffffff;
   }
@@ -1019,7 +1041,7 @@
   }
 
   .ct-table .ct-searchtable-th {
-    text-align: center
+    /*text-align: center*/
   }
 
   .ct-table .checkbox-td {

package/src/centaline/dynamicSearchList/src/dynamicTableStatistics.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="ct-table-Statistics">
+    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+      <el-tab-pane v-for="(item, index) in editableTabs" :key="item.name" :label="item.title" :name="item.name" lazy>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'ct-tableStatistics',
+    props: {
+      tip: String,
+      size: String
+    },
+    data() {
+      return {
+        activeName: '1',
+        editableTabs: [
+          { name: '1', title: '用户管理' },
+          { name: '2', title: '配置管理' },
+          { name: '3', title: '角色管理' },
+          { name: '4', title: '定时任务补偿' },
+          { name: '5', title: '定时任务补偿2' },
+          { name: '6', title: '定时任务补偿3' },
+          { name: '7', title: '定时任务补偿4' },
+          { name: '8', title: '定时任务补偿5' },
+          { name: '9', title: '定时任务补偿6' },
+          { name: '10', title: '定时任务补偿7' }
+        ],
+      }
+    },
+    methods: {
+      handleClick(tab, event) {
+        console.log(tab, event);
+      }
+    }
+  }
+</script>
+<style>
+</style>

package/src/centaline/dynamicSearchList/src/dynamicTableToolbar.vue

@@ -1,11 +1,12 @@
 <template>
   <div class="ct-tableToolbar" style="width:100%;" v-if="buttons && buttons.length > 0">
     <ul>
-      <li v-for="btn in buttons" class="ct-ToolbarButton">
+      <li v-for="btn in buttons" class="ct-ToolbarButton max-ToolbarButton">
         <component :is="btn.is" :vmodel="btn"
                    @click="clickHandler(btn,$event)"
                    @importComplete="importComplete"
                    v-if="btn.show"
+                  :optionApi="optionApi"
                    :fileData="getFileData(btn)"></component>
       </li>
     </ul>
@@ -16,7 +17,8 @@
     name: 'ctTableToolbar',
     props: {
       buttons: Array,
-      searchModel: Object
+      searchModel: Object,
+      optionApi:String
     },
     data() {
       return {};
@@ -42,8 +44,9 @@
     width:100%;
     position:relative;
     float:left;
-    padding:10px;
-    background-color:#fafafa;
+    padding:0 15px 10px 15px;
+    background-color:#fff;
+    border-radius: 6px;
   }
     .ct-tableToolbar ul {
       list-style: none; /* 去掉ul前面的符号 */