Selaa lähdekoodia

修改底部条样式

zhbyyy 2 vuotta sitten
vanhempi
commit
d66774fbd6

+ 1 - 1
manpowerPort/index.html

@@ -296,7 +296,7 @@
     </div>
     <div class="footer">
       <!-- <a class="item" v-for="(item,index) in companyList.slice(0, 8)" :key="index" -->
-      <a class="item" v-for="(item,index) in companyList" :key="index"
+      <a class="item" v-for="(item,index) in companyList" style="display: flex;align-items: center;justify-content: center;" :key="index"
         @click="handleGoPage(item.id,item.name)"><img :src="`./images/logos/${item.orgLogoNum}.png`"></img>
         {{item.name}}</a>
       <!-- <div style="font-weight: bold;display: flex;align-items: center;flex-shrink: 0;position: absolute;right: -20px;bottom: 30%;" v-if="companyList.length>8"><span>. . .</span>

+ 7 - 3
manpowerPort/index2.html

@@ -271,9 +271,13 @@
       </div>
     </div>
     <div class="footer">
-      <!-- <a class="item onelist-hidden" v-for="(item,index) in companyList.slice(0, 8)" :key="index" @click="handleGoPage(item.id,item.name)">{{item.name}}</a> -->
-      <a class="item" v-for="(item,index) in companyList.slice(0, 8)" :key="index" @click="handleGoPage(item.id,item.name)">{{item.name}}</a>
-      <div style="font-weight: bold;display: flex;align-items: center;flex-shrink: 0;position: absolute;right: -20px;bottom: 30%;" v-if="companyList.length>8"><span>. . .</span>
+      <template v-if="companyList.length>8">
+        <a class="item" v-for="(item,index) in companyList.slice(0, 17)" :key="index" @click="handleGoPage(item.id,item.name)">{{item.name}}</a>
+        <a class="item">...</a>
+      </template>
+      <template v-else>
+        <a class="item" v-for="(item,index) in companyList" :key="index" @click="handleGoPage(item.id,item.name)">{{item.name}}</a>
+      </template>
       </div>
 
     <div class="tip" @click="showTip = false" v-if="showTip">

+ 10 - 3
manpowerPort/index2JNKG.html

@@ -271,9 +271,16 @@
       </div>
     </div>
     <div class="footer">
-      <a class="item" v-for="(item,index) in companyList.slice(0, 8)" :key="index" @click="handleGoPage(item.id,item.name)">{{item.name}}</a>
-      <div style="font-weight: bold;display: flex;align-items: center;flex-shrink: 0;position: absolute;right: -20px;bottom: 30%;" v-if="companyList.length>8"><span>. . .</span>
-      </div>
+      <template v-if="companyList.length>8">
+        <a class="item" v-for="(item,index) in companyList.slice(0, 17)" :key="index"
+          @click="handleGoPage(item.id,item.name)">{{item.name}}</a>
+        <a class="item">...</a>
+      </template>
+      <template v-else>
+        <a class="item" v-for="(item,index) in companyList" :key="index"
+          @click="handleGoPage(item.id,item.name)">{{item.name}}</a>
+      </template>
+    </div>
 
     <div class="tip" @click="showTip = false" v-if="showTip">
       <div class="tip-box">

+ 7 - 2
manpowerPort/index3.html

@@ -269,8 +269,13 @@
       </div>
     </div>
     <div class="footer" style="width: 70%;">
-      <a class="item" v-for="(item,index) in companyList.slice(0, 8)" :key="index" @click="handleGoPage(item.id,item.name)">{{item.name}}</a>
-      <div style="font-weight: bold;display: flex;align-items: center;flex-shrink: 0;position: absolute;right: -20px;bottom: 30%;" v-if="companyList.length>8"><span>. . .</span>
+      <template v-if="companyList.length>8">
+        <a class="item" v-for="(item,index) in companyList.slice(0, 17)" :key="index" @click="handleGoPage(item.id,item.name)">{{item.name}}</a>
+        <a class="item">...</a>
+      </template>
+      <template v-else>
+        <a class="item" v-for="(item,index) in companyList" :key="index" @click="handleGoPage(item.id,item.name)">{{item.name}}</a>
+      </template>
       </div>
     <div class="tip" @click="showTip = false" v-if="showTip">
       <div class="tip-box">

+ 7 - 2
manpowerPort/index3MT.html

@@ -269,8 +269,13 @@
       </div>
     </div>
     <div class="footer" style="width: 70%;">
-      <a class="item" v-for="(item,index) in companyList.slice(0, 8)" :key="index" @click="handleGoPage(item.id,item.name)">{{item.name}}</a>
-      <div style="font-weight: bold;display: flex;align-items: center;flex-shrink: 0;position: absolute;right: -20px;bottom: 30%;" v-if="companyList.length>8"><span>. . .</span>
+      <template v-if="companyList.length>8">
+        <a class="item" v-for="(item,index) in companyList.slice(0, 17)" :key="index" @click="handleGoPage(item.id,item.name)">{{item.name}}</a>
+        <a class="item">...</a>
+      </template>
+      <template v-else>
+        <a class="item" v-for="(item,index) in companyList" :key="index" @click="handleGoPage(item.id,item.name)">{{item.name}}</a>
+      </template>
       </div>
     <div class="tip" @click="showTip = false" v-if="showTip">
       <div class="tip-box">

+ 20 - 20
manpowerPort/js/index.js

@@ -640,7 +640,7 @@ let app = new Vue({
         ],
         series: [
           {
-            name: '部机构数核定上限',
+            name: '部机构数核定上限',
             type: 'line',
             // yAxisIndex: 1, //使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用
             smooth: true, //平滑曲线显示
@@ -663,7 +663,7 @@ let app = new Vue({
             data: dataL1[2],
           },
           {
-            name: '六定改革前部机构数',
+            name: '六定改革前部机构数',
             type: 'bar',
             barWidth: 15,
             itemStyle: {
@@ -683,7 +683,7 @@ let app = new Vue({
             data: dataL1[0],
           },
           {
-            name: '当前各省属企业部机构数',
+            name: '当前各省属企业部机构数',
             type: 'bar',
             barWidth: 15,
             itemStyle: {
@@ -715,8 +715,8 @@ let app = new Vue({
         // },
       }
 
-      option.title.text = '各省属企业部机构数'
-      option.legend.data = ['六定改革前本部机构数', '当前各省属企业本部机构数', '本部机构数核定上限']
+      option.title.text = '各省属企业部机构数'
+      option.legend.data = ['六定改革前总部机构数', '当前各省属企业总部机构数', '总部机构数核定上限']
       option.yAxis.push({
         splitLine: {
           show: false,
@@ -749,7 +749,7 @@ let app = new Vue({
         ],
         series: [
           {
-            name: '当前部共享服务中心/事业部数',
+            name: '当前部共享服务中心/事业部数',
             type: 'bar',
             barWidth: 15,
             label: {
@@ -792,7 +792,7 @@ let app = new Vue({
             data: dataL2[0],
           },
           {
-            name: '六定改革前部共享服务中心/事业部核定上限',
+            name: '六定改革前部共享服务中心/事业部核定上限',
             type: 'bar',
             barWidth: 15,
             label: {
@@ -831,7 +831,7 @@ let app = new Vue({
             data: dataL2[2],
           },
           {
-            name: '部共享服务中心/事业部核定上限',
+            name: '部共享服务中心/事业部核定上限',
             type: 'line',
             // yAxisIndex: 1, //使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用
             smooth: true, //平滑曲线显示
@@ -874,8 +874,8 @@ let app = new Vue({
           },
         ],
       }
-      option.title.text = '各省属企业部共享服务中心/事业部数'
-      option.legend.data = ['当前本部共享服务中心/事业部数', '本部共享服务中心/事业部核定上限', '六定改革前本部共享服务中心/事业部核定上限']
+      option.title.text = '各省属企业部共享服务中心/事业部数'
+      option.legend.data = ['当前总部共享服务中心/事业部数', '总部共享服务中心/事业部核定上限', '六定改革前总部共享服务中心/事业部核定上限']
       option.yAxis.push({
         splitLine: {
           show: false,
@@ -1024,7 +1024,7 @@ let app = new Vue({
         ],
         series: [
           {
-            name: '六定改革前部中层管理人数',
+            name: '六定改革前部中层管理人数',
             type: 'bar',
             barWidth: 15,
             label: {
@@ -1063,7 +1063,7 @@ let app = new Vue({
             data: dataL4[0],
           },
           {
-            name: '当前部中层管理人数',
+            name: '当前部中层管理人数',
             type: 'bar',
             barWidth: 15,
             label: {
@@ -1108,7 +1108,7 @@ let app = new Vue({
             data: dataL4[1],
           },
           {
-            name: '部中层管理人数核定上限',
+            name: '部中层管理人数核定上限',
             type: 'line',
             // yAxisIndex: 1,
             smooth: true, //平滑曲线显示
@@ -1151,8 +1151,8 @@ let app = new Vue({
           },
         ],
       }
-      option.title.text = '各省属企业部中层管理人数'
-      option.legend.data = ['六定改革前本部中层管理人数', '当前本部中层管理人数', '本部中层管理人数核定上限']
+      option.title.text = '各省属企业部中层管理人数'
+      option.legend.data = ['六定改革前总部中层管理人数', '当前总部中层管理人数', '总部中层管理人数核定上限']
       option.legend.show = true
       // option.yAxis.push({
       //   splitLine: {
@@ -1345,7 +1345,7 @@ let app = new Vue({
         ],
         series: [
           {
-            name: '部员额数',
+            name: '部员额数',
             type: 'bar',
             barWidth: 15,
             itemStyle: {
@@ -1369,7 +1369,7 @@ let app = new Vue({
             data: dataL6[0],
           },
           {
-            name: '六定改革前部员额数',
+            name: '六定改革前部员额数',
             type: 'bar',
             barWidth: 15,
             itemStyle: {
@@ -1389,7 +1389,7 @@ let app = new Vue({
             data: dataL6[2],
           },
           {
-            name: '部员额数核定上限',
+            name: '部员额数核定上限',
             type: 'line',
             yAxisIndex: 1, //使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用
             smooth: true, //平滑曲线显示
@@ -1413,8 +1413,8 @@ let app = new Vue({
           },
         ],
       }
-      option.title.text = '各省属企业部员额数'
-      option.legend.data = ['本部员额数', '六定改革前本部员额数', '本部员额数核定上限']
+      option.title.text = '各省属企业部员额数'
+      option.legend.data = ['总部员额数', '六定改革前总部员额数', '总部员额数核定上限']
       option.legend.show = true
       option.yAxis.push({
         splitLine: {

+ 1 - 0
manpowerPort/js/index2.js

@@ -226,6 +226,7 @@ let app = new Vue({
           res.orgData.area1.card1.forEach(item => {
             dataL1[0].push(item['ZBPZ0010'])
           })
+          console.log(dataL1[0],'????')
           // 各二级企业所属架构数
           dataL2[0] = []
           res.orgData.area1.card2.forEach(item => {

+ 5 - 3
manpowerPort/styles/index.css

@@ -211,15 +211,17 @@ a {
   height: 70px;
   line-height: 70px;
   text-align: center;
-  align-items: center;
-  justify-content: center;
-  display: flex;
+  /* display: flex; */
+  padding: 0 20px;
   color: #fff;
   font-weight: 600;
   font-size: 22px;
   background: url('../images/footer-item.png') no-repeat;
   background-size: 100% 100%;
   width: calc( 100% / 8);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .footer a img {
   width: 35px;