Merge remote-tracking branch 'origin/master'

付延余

2022-04-22 9efb4e77cf44f0adaf677662c6779b45954a0a2b

 src/pages/components/jiuyeQingkuang/chengzhenXinzengJiuye.vue

@@ -6,107 +6,215 @@
        :header-cell-style="handleheader"
        style="width: 100%">
        <el-table-column
          prop="shiqu"
          prop="area"
          label="县（市、区）"
          align="center"
          width="220">
          <template slot-scope="scope">
            <div class="sanjiao-box">
              <div class="cell-content-box">{{scope.row.area}}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          width="280"
          prop="january"
          label="1月"
          align="center">
          <template slot-scope="scope">
            <div class="sanjiao-box">
              <div class="cell-content-box">{{scope.row.january.val}}</div>
              <div class="paiming-box red-sanjiao"
                   :class="scope.row.january.order > 0 ? 'red-sanjiao' : 'green-sanjiao'"
                   v-if="scope.row.january.order != 0">
                <div>{{scope.row.january.order}}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          width="280"
          prop="february"
          label="2月"
          align="center">
          <template slot-scope="scope">
            <div class="sanjiao-box">
              <div>{{scope.row.february.val}}</div>
              <div class="paiming-box"
                   :class="scope.row.february.order > 0 ? 'red-sanjiao' : 'green-sanjiao'"
                   v-if="scope.row.february.order != 0">
                <div>{{scope.row.february.order}}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          width="280"
          prop="march"
          label="3月"
          align="center">
          <template slot-scope="scope">
            <div class="sanjiao-box">
              <div>{{scope.row.march.val}}</div>
              <div class="paiming-box"
                   :class="scope.row.march.order > 0 ? 'red-sanjiao' : 'green-sanjiao'"
                   v-if="scope.row.march.order != 0">{{scope.row.march.order}}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          width="280"
          prop="april"
          label="4月"
          align="center">
          <template slot-scope="scope">
            <div class="sanjiao-box">
              <span>{{scope.row.april.val}}</span>
              <div class="paiming-box"
                   :class="scope.row.april.order > 0 ? 'red-sanjiao' : 'green-sanjiao'"
                   v-if="scope.row.april.order != 0">{{scope.row.april.order}}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          width="280"
          prop="may"
          label="5月"
          align="center">
          <template slot-scope="scope">
            <div class="sanjiao-box">
              <span>{{scope.row.may.val}}</span>
              <div class="paiming-box"
                   :class="scope.row.may.order > 0 ? 'red-sanjiao' : 'green-sanjiao'"
                   v-if="scope.row.may.order != 0">{{scope.row.may.order}}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          width="280"
          prop="june"
          label="6月"
          align="center">
          <template slot-scope="scope">
            <div class="sanjiao-box">
              <span>{{scope.row.june.val}}</span>
              <div class="paiming-box"
                   :class="scope.row.june.order > 0 ? 'red-sanjiao' : 'green-sanjiao'"
                   v-if="scope.row.june.order != 0">{{scope.row.june.order}}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          width="280"
          prop="july"
          label="7月"
          align="center">
          <template slot-scope="scope">
            <div class="sanjiao-box">
              <span>{{scope.row.july.val}}</span>
              <div class="paiming-box"
                   :class="scope.row.july.order > 0 ? 'red-sanjiao' : 'green-sanjiao'"
                   v-if="scope.row.july.order != 0">{{scope.row.july.order}}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          width="280"
          prop="august"
          label="8月"
          align="center">
          <template slot-scope="scope">
            <div class="sanjiao-box">
              <span>{{scope.row.august.val}}</span>
              <div class="paiming-box"
                   :class="scope.row.august.order > 0 ? 'red-sanjiao' : 'green-sanjiao'"
                   v-if="scope.row.august.order != 0">{{scope.row.august.order}}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          width="280"
          prop="september"
          label="9月"
          align="center">
          <template slot-scope="scope">
            <div class="sanjiao-box">
              <span>{{scope.row.september.val}}</span>
              <div class="paiming-box"
                   :class="scope.row.september.order > 0 ? 'red-sanjiao' : 'green-sanjiao'"
                   v-if="scope.row.september.order != 0">{{scope.row.september.order}}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          width="280"
          prop="october"
          label="10月"
          align="center">
          <template slot-scope="scope">
            <div class="sanjiao-box">
              <span>{{scope.row.october.val}}</span>
              <div class="paiming-box"
                   :class="scope.row.october.order > 0 ? 'red-sanjiao' : 'green-sanjiao'"
                   v-if="scope.row.october.order != 0">{{scope.row.october.order}}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          width="280"
          prop="november"
          label="11月"
          align="center">
          <template slot-scope="scope">
            <div class="sanjiao-box">
              <span>{{scope.row.november.val}}</span>
              <div class="paiming-box"
                   :class="scope.row.november.order > 0 ? 'red-sanjiao' : 'green-sanjiao'"
                   v-if="scope.row.november.order != 0">{{scope.row.november.order}}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          width="280"
          prop="december"
          label="12月"
          align="center">
          <template slot-scope="scope">
            <div class="sanjiao-box">
              <span>{{scope.row.december.val}}</span>
              <div class="paiming-box"
                   :class="scope.row.december.order > 0 ? 'red-sanjiao' : 'green-sanjiao'"
                   v-if="scope.row.december.order != 0">{{scope.row.december.order}}</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
</template>

<script>

    export default {
        name: "chengzhenXinzengJiuye",
        props: {
            tableData: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        data() {
            return {
                tableData: [{
                    shiqu:'全市',
                    date: '233322',
                    name: '4432',
                    address: '122'
                }, {
                    shiqu:'长安区',
                    date: '23322',
                    name: '12222',
                    address: '4445'
                }, {
                    shiqu:'桥西区',
                    date: '4432',
                    name: '455',
                    address: '5999'
                }, {
                    shiqu:'新华区',
                    date: '5632',
                    name: '145',
                    address: '624'
                }]

            }
        },
        mounted() {
        },
        methods: {
            handleheader(data) {
                return {
                    lineHeight: '0',
                    lineHeight: '2.5',
                }
            }
        }
@@ -122,7 +230,6 @@
      background-color:$color-blue;
    }
    .el-table .el-table__body-wrapper tr{
      height: 0.25rem  /* 64/256 */;
    }
    .el-table tr:nth-child(odd){
      background-color: #CEF2FF;
@@ -143,7 +250,9 @@
      font-size: $fontSize-28;
      color: $color-darkGrey;
      font-weight: 300;
      line-height: 1;
      line-height: 0.265625rem  /* 68/256 */;
      height: 0.265625rem  /* 68/256 */;
      padding-left: 0;
    }
    .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
      border-bottom:1Px solid $color-grey; /*no*/
@@ -151,8 +260,42 @@
    .el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
      border-right:1Px solid $color-grey; /*no*/
    }
    .el-table .el-table__cell{
      padding:0;
    }
  }
</style>
<style scoped>

<style lang="scss" scoped>
  @import "../../../assets/css/base";
  .sanjiao-box{
    line-height: 0.265625rem  /* 68/256 */;
    position: relative;
    .paiming-box{
      display: block;
      color: $color-white;
      position: absolute;
      width: 0;
      height: 0;
      top: 0;
      left: 0;
      div{
        position: relative;
        left: 0px;
        top: -0.3125rem  /* -80/256 */;
        color: #fff;
        width: 0.1328125rem  /* 34/256 */;
      }
    }
    .red-sanjiao{
      border-top: 0.265625rem  /* 68/256 */ solid #FF0000;
      border-right: 0.265625rem  /* 68/256 */ solid transparent;
    }
    .green-sanjiao{
      border-top: 0.265625rem  /* 68/256 */ solid #3ABF21;
      border-right: 0.265625rem  /* 68/256 */ solid transparent;
    }
    .content{
      /*line-height: 0.265625rem  !* 68/256 *!;*/
    }
  }
</style>