yd_qycpfb/jp-ui/src/views/modules/sys/dashboard/analysis/index.vue

<template>
  <div class="background-image">
    <div class="header">
      <!-- <div class="roll-name-box">
        <div class="scroll-content">
          <span v-for="(item, index) in notifyList" :key="index">
            <span>{{ item.title}}:</span>
            <span>{{ item.content }}</span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          </span>
        </div>
      </div> -->
    </div>
    <div class="headline">
      <div class="headline-text">盐都区工业企业产品发布平台</div>
    </div>
    <div class="main">
      <div style="width: 1.5%"></div>
      <div class="main-1">
        <div class="main-periphery">
          <div style="height: 25%"></div>
          <div class="main-periphery-font" style="height: 30%; color: #031c57">
            今日入库企业数
          </div>
          <div class="main-periphery-numerical" style="height: 45%; color: #0843cd">
            {{ pageInfo.todayenterprisec }}
          </div>
        </div>
        <div class="main-periphery">
          <div style="height: 25%"></div>
          <div class="main-periphery-font" style="height: 30%; color: #031c57">
            入库企业总数
          </div>
          <div class="main-periphery-numerical" style="height: 45%; color: #0843cd">
            {{ pageInfo.enterprisec }}
          </div>
        </div>
      </div>
      <div class="main-2">
        <div class="main-periphery">
          <div style="height: 25%"></div>
          <div class="main-periphery-font" style="height: 30%; color: #063e2a">
            今天活跃数
          </div>
          <div class="main-periphery-numerical" style="height: 45%; color: #028455">
            {{ pageInfo.todayc }}
          </div>
        </div>

        <div class="main-periphery">
          <div style="height: 25%"></div>
          <div class="main-periphery-font" style="height: 30%; color: #063e2a">
            当月活跃数
          </div>
          <div class="main-periphery-numerical" style="height: 45%; color: #028455">
            {{ pageInfo.samemonthc }}
          </div>
        </div>


      </div>

      <div class="main-4">
        <div class="main-periphery">
          <div style="height: 25%"></div>
          <div class="main-periphery-font" style="height: 30%; color: #764710">
            入库企业行业
            <span class="main-periphery-font-small" style="color: #764710"></span>
          </div>
          <div class="main-periphery2">
            <div style="height: 15%"></div>
            <div class="main-periphery-font-small" style="height: 30%; color: #764710">
              {{pageInfo2[0].industry}}
              <span class="main-periphery-font"
                style="font-weight: bold; color: #b86504; margin-left: 10px">{{ pageInfo2[0].cc }}</span>
              <span class="main-periphery-font-small"
                style="font-weight: bold; color: #b86504; margin-left: 10px">家</span>
            </div>
            <div style="height: 15%"></div>
            <div class="main-periphery-font-small" style="height: 30%; color: #764710">
              {{pageInfo2[1].industry}}
              <span class="main-periphery-font"
                style="font-weight: bold; color: #b86504; margin-left: 10px">{{ pageInfo2[1].cc }}</span>
              <span class="main-periphery-font-small"
                style="font-weight: bold; color: #b86504; margin-left: 10px">家</span>
            </div>
          </div>

          <div class="main-periphery2">
            <div style="height: 15%"></div>
            <div class="main-periphery-font-small" style="height: 30%; color: #764710">
              {{pageInfo2[2].industry}}
              <span class="main-periphery-font"
                style="font-weight: bold; color: #b86504; margin-left: 10px">{{ pageInfo2[2].cc }}</span>
              <span class="main-periphery-font-small"
                style="font-weight: bold; color: #b86504; margin-left: 10px">家</span>
            </div>
            <div style="height: 15%"></div>
            <div class="main-periphery-font-small" style="height: 30%; color: #764710">
              {{pageInfo2[3].industry}}
              <span class="main-periphery-font"
                style="font-weight: bold; color: #b86504; margin-left: 10px">{{ pageInfo2[3].cc }}</span>
              <span class="main-periphery-font-small"
                style="font-weight: bold; color: #b86504; margin-left: 10px">家</span>
            </div>

            <div style="height: 15%"></div>
            <div class="main-periphery-font-small" style="height: 30%; color: #764710">
              {{pageInfo2[4].industry}}
              <span class="main-periphery-font"
                style="font-weight: bold; color: #b86504; margin-left: 10px">{{ pageInfo2[4].cc }}</span>
              <span class="main-periphery-font-small"
                style="font-weight: bold; color: #b86504; margin-left: 10px">家</span>
            </div>


          </div>
        </div>
      </div>
      <!-- <div class="main-5">
        <div class="main-periphery">
          <div style="height: 25%"></div>
          <div class="main-periphery-font" style="height: 30%; color: #016a61">
            本年税源办
            <span class="main-periphery-font-small" style="color: #016a61"
              >(万元)</span
            >
          </div>
          <div
            class="main-periphery-numerical"
            style="height: 45%; color: #0fb9c4"
          >
            {{ pageInfo.bnrukussZF }}
          </div>
        </div>
        <div class="main-periphery">
          <div style="height: 25%"></div>
          <div class="main-periphery-font" style="height: 30%; color: #016a61">
            本月税源办
            <span class="main-periphery-font-small" style="color: #016a61"
              >(万元)</span
            >
          </div>
          <div style="display: flex; width: 100%; height: 45%">
            <div
              class="main-periphery-numerical"
              style="display: flex; width: 55%; color: #0fb9c4"
            >
              {{ pageInfo.byrukuZFss }}
            </div>
            <div style="width: 45%">
              <div
                class="main-periphery-font-small"
                style="height: 30%"
                :style="{ color: textColor5 }"
              >
                环比
                <i
                  :class="{
                    'el-icon-top icon': Number(pageInfo.rkhbzf) > 0,
                    'el-icon-bottom icon': Number(pageInfo.rkhbzf) < 0,
                  }"
                ></i>
                {{ Math.abs(pageInfo.rkhbzf) }}%
              </div>
              <div style="height: 10%"></div>
              <div
                class="main-periphery-font-small"
                style="height: 30%"
                :style="{ color: textColor6 }"
              >
                同比
                <i
                  :class="{
                    'el-icon-top icon': Number(pageInfo.rkzftb) > 0,
                    'el-icon-bottom icon': Number(pageInfo.rkzftb) < 0,
                  }"
                ></i>
                {{ Math.abs(pageInfo.rkzftb) }}%
              </div>
            </div>
          </div>
        </div>
      </div> -->
    </div>
    <div class="footer">
      <!-- <div class="footer-main">
        <div style="height: 10%"></div>
        <div class="footer-main-top">
          <i class="el-icon-s-promotion icon"></i>
          快捷入口
        </div>
        <div class="footer-fast">
          <div class="footer-fast-2" v-show="haveCJYQ">
            <router-link to="/parkmanagement/ParkManagementList">
              <div class="footer-fast-1-1"></div>
              <div style="height: 10%"></div>
              <div class="footer-fast-1-2">创建园区</div>
            </router-link>
          </div>
          <div class="footer-fast-2" v-show="haveCJLY">
            <router-link to="/buildinginfo/BuildingManagementList">
              <div class="footer-fast-2-1"></div>
              <div style="height: 10%"></div>
              <div class="footer-fast-1-2">创建楼宇</div>
            </router-link>
          </div>
          <div class="footer-fast-2" v-show="haveCJQY">
            <router-link to="/enterpriseinfo/EnterpriseInfoList">
              <div class="footer-fast-2-2"></div>
              <div style="height: 10%"></div>
              <div class="footer-fast-1-2">创建企业</div>
            </router-link>
          </div>
          <div class="footer-fast-2" v-show="haveCJYG">
            <router-link to="/qyuser/QyUserList">
              <div class="footer-fast-2-3"></div>
              <div style="height: 10%"></div>
              <div class="footer-fast-1-2">新增员工</div>
            </router-link>
          </div>
          <div class="footer-fast-2" v-show="haveSBSS">
            <router-link to="/saleinventory/SaleInventoryList">
              <div class="footer-fast-2-4"></div>
              <div style="height: 10%"></div>
              <div class="footer-fast-1-2">申报税收</div>
            </router-link>
          </div>
          <div class="footer-fast-2" v-show="haveXXWH">
            <router-link to="/enterpriseother/EnterpriseOtherList">
              <div class="footer-fast-2-5"></div>
              <div style="height: 10%"></div>
              <div class="footer-fast-1-2">信息维护</div>
            </router-link>
          </div>
        </div>
      </div> -->
      <div class="headline">
        <div class="headline-text">大走访看板</div>
      </div>
      <div class="footer-main">
        <el-row>
          <el-col :span="12">
            <div class="">
              <el-button autofocus @click="getTime(0)" size="mini">月度</el-button>
              <el-button @click="getTime(1)" size="mini">季度</el-button>
              <el-button @click="getTime(2)" size="mini">年度</el-button>
            </div>
          </el-col>
          <el-col :span="12">
            <div style="text-align: right;">
              <el-date-picker size="mini" @change="getTime(3)" v-model="value2" type="daterange" align="right"
                unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                :picker-options="pickerOptions">
              </el-date-picker>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4">
            <el-card shadow="always" :body-style="{padding: '5px',margin:'0px'}">
              <div class="footer-fast-1-1">
                <p><span style="color: red;">●</span>未完成大走访人数</p>
                <p><span style="font-size: 20px;font-weight: 700;margin-right: 10px;">{{allSum.perUnFinishSum}}</span>人
                </p>
                <p>占比<span style="font-size: 12px;color: red;margin-left: 5px;">{{allSum.perUnfinish}}%</span></p>
              </div>
            </el-card>
          </el-col>
          <el-col :span="4">
            <el-card shadow="always" :body-style="{padding: '5px',margin:'0px'}">
              <div class="footer-fast-1-1">
                <p><span style="color: #0843cd;">●</span>完成大走访人数</p>
                <p><span style="font-size: 20px;font-weight: 700;margin-right: 10px;">{{allSum.perFinishSum}}</span>人
                </p>
                <p>占比<span style="font-size: 12px;color: #0843cd;margin-left: 5px;">{{allSum.perAcount}}%</span></p>
              </div>
            </el-card>
          </el-col>
          <el-col :span="4">
            <el-card shadow="always" :body-style="{padding: '5px',margin:'0px'}">
              <div class="footer-fast-1-1">
                <p><span style="color: red;">●</span>未完成大走访企业数</p>
                <p><span style="font-size: 20px;font-weight: 700;margin-right: 10px;">{{allSum.qyUnFinishSum}}</span>个
                </p>
                <p>占比<span style="font-size: 12px;color: red;margin-left: 5px;">{{allSum.qyUnfinish}}%</span></p>
              </div>
            </el-card>
          </el-col>
          <el-col :span="4">
            <el-card shadow="always" :body-style="{padding: '5px',margin:'0px'}">
              <div class="footer-fast-1-1">
                <p><span style="color: #0843cd;">●</span>完成大走访企业数</p>
                <p><span style="font-size: 20px;font-weight: 700;margin-right: 10px;">{{allSum.qyFinishSum}}</span>个
                </p>
                <p>占比<span style="font-size: 12px;color: #0843cd;margin-left: 5px;">{{allSum.qyAcount}}%</span></p>
              </div>
            </el-card>
          </el-col>
          <el-col :span="4">
            <el-card shadow="always" :body-style="{padding: '5px',margin:'0px'}">
              <div class="footer-fast-1-1">
                <p><span style="color: red;">●</span>未办结问题数</p>
                <p><span style="font-size: 20px;font-weight: 700;margin-right: 10px;">{{allSum.queUnFinishSum}}</span>个
                </p>
                <p>占比<span style="font-size: 12px;color: red;margin-left: 5px;">{{allSum.queUnfinish}}%</span></p>
              </div>
            </el-card>
          </el-col>
          <el-col :span="4">
            <el-card shadow="always" :body-style="{padding: '5px',margin:'0px'}">
              <div class="footer-fast-1-1">
                <p><span style="color: #0843cd;">●</span>办结问题数</p>
                <p><span style="font-size: 20px;font-weight: 700;margin-right: 10px;">{{allSum.queFinishSum}}</span>个
                </p>
                <p>占比<span
                    style="font-size: 12px;color: #0843cd;margin-left: 5px;">{{parseFloat(allSum.queAcount).toFixed(2)}}%</span>
                </p>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <div style="width:100%;height:280px;">
          <div id="eChart2" style="width:100%;height:100%;"></div>
        </div>
      </div>
    </div>

    <el-dialog title="走访" :close-on-click-modal="false" v-dialogDrag :visible.sync="visible">

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="visible = false">关闭</el-button>
        <!-- <el-button size="small" type="primary"  @click="doSubmit()" v-noMoreClick>确定</el-button> -->
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import bigScreenService from "@/api/bigScreen/bigScreenApi";
  import notifyService from "@/api/notify/notifyService";
  import lyService from "@/api/service/lyServiceService";
  import userService from "@/api/sys/userService";
  import visitStatistics from './visitStatistics'
  export default {
    data() {
      return {
        parkSum: "24",
        enterpriseSum: "1025",
        premisesAcreage: "24152.3",
        usableArea: "18122.1",
        residualArea: "6030.2",
        moneyYear: "1025.2",
        moneyMonth: "101.2",
        moneyMoM: "2.2%",
        moneyYoY: "0.2%",
        revenueYear: "201.2",
        revenueMonth: "31.2",
        revenueMoM: "2.2%",
        revenueYoY: "0.2%",
        taxYear: "201.2",
        taxMonth: "31.2",
        taxMoM: "2.2%",
        taxYoY: "0.2%",
        textColor1: "#028455",
        textColor2: "#028455",
        textColor3: "#028455",
        textColor4: "#028455",
        textColor5: "#028455",
        textColor6: "#028455",
        isTop1: true,
        isTop2: true,
        isTop3: true,
        isTop4: true,
        isTop5: true,
        isTop6: true,
        isBottom1: false,
        isBottom2: false,
        isBottom3: false,
        isBottom4: false,
        isBottom5: false,
        isBottom6: false,
        pageInfo: {},
        pageInfo2: [{
          industry: '',
          cc: ''
        }, {
          industry: '',
          cc: ''
        }, {
          industry: '',
          cc: ''
        }, {
          industry: '',
          cc: ''
        }, {
          industry: '',
          cc: ''
        }, {
          industry: '',
          cc: ''
        }, ],
        haveCJYQ: false,
        haveCJLY: false,
        haveCJQY: false,
        haveCJYG: false,
        haveSBSS: false,
        haveXXWH: false,
        nowYQInfo: {
          BelowUndergraduate: 0,
          Undergraduate: 0,
          Postgraduate: 0,
          DoctoralStudent: 0,
        },
        notifyList: [],
        tablePage: {
          total: 0,
          currentPage: 1,
          pageSize: 10,
          orders: [{
            column: 'a.create_date',
            asc: false
          }]
        },
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value2: [new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 30), new Date()],
        allSum: {},
        visible: false,
      };
    },
    components: {
      visitStatistics
    },
    activated() {

      this.changeColor();
      this.getPageInfo();
      this.getMenuList();
      this.getNotifyList();
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      this.getAllAum(start, end)
      this.get2();
    },
    methods: {
      get2() {
        var that = this
        //获取id并初始化图表
        var myChart = this.$echarts.init(document.getElementById("eChart2"));
        lyService.getPerson().then(({
          data
        }) => {
          const x = [];
          const y = [];
          for (let i = 0; i < data.length; i++) {
            x.push(data[i].des1)
            y.push(data[i].perNum)
          }

          // const x = this.tableData.x//x轴
          // const y = this.tableData.y//y轴

          //配置项
          let option = {
            tooltip: {
              show: false
            },
            legend: {
              show: false
            },
            grid: {
              left: "4%",
              right: "3%",
              bottom: "7%",
              top: "15%",
              containLabel: true
            },
            // dataZoom: [
            //   //滑动条
            //   {
            //     xAxisIndex: 0, //这里是从X轴的0刻度开始
            //     show: false, //是否显示滑动条，不影响使用
            //     type: "inside", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            //     startValue: 0, // 从头开始。
            //     endValue: 8, // 一次性展示几个。
            //   },
            // ],
            xAxis: {
              type: "category",
              data: x.length && y.length > 0 ? x : tableData1,
              boundaryGap: [0, 0.01],
              axisLine: {
                lineStyle: {
                  color: "rgba(255, 255, 255, 0.1)",
                  width: 1
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "rgba(255, 255, 255, 0.1)"
                }
              },
              axisTick: {
                show: true
              },
              axisLabel: {
                show: true,
                color: "#000",
                fontSize: 14
              }
            },
            yAxis: {
              name: "人",
              nameTextStyle: {
                color: "#000",
                fontSize: 13,
              },
              type: "value",
              boundaryGap: [0, 0.01],
              axisLine: {
                lineStyle: {
                  color: "#333",
                  width: 1
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "rgba(255, 255, 255, 0.1)"
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: true,
                color: "#000",
                fontSize: 14
              }
            },
            series: [{
              name: "人",
              type: "bar",
              data: y,
              barWidth: 20,
              label: {
                normal: {
                  show: true,
                  position: "top",
                  fontSize: 12,
                  color: '#000'
                }
              },
              itemStyle: {
                normal: {
                  label: {
                    show: false
                  },
                  borderRadius: 2,
                  color: '#0184ff'
                }
              }
            }]
          };

          myChart.setOption(option); //通过setOption()方法生成图表
          myChart.on('click', function(params) {
            that.$router.push({
              name: 'visit',
              params: {
                name: params.name,
                createTime: that.value2
              }
            })
          })
        })
      },
      getPageInfo() {
        bigScreenService.InfoStatistics({}).then(({
          data
        }) => {
          this.pageInfo = data;
        });

        bigScreenService.InfoStatistics_industry({}).then(({
          data
        }) => {
          this.pageInfo2 = data;
        });

      },

      getAllAum(start, end) {
        lyService.getProgressStatistics(start, end).then(({
          data
        }) => {
          this.allSum = data
        })
      },

      getTime(val) {
        const end = new Date();
        const start = new Date();
        if (val == 0) {
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
        } else if (val == 1) {
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
        } else if (val == 2) {
          start.setFullYear(start.getFullYear() - 1);
        } else if (val == 3) {
          start.setTime(this.value2[0])
          end.setTime(this.value2[1])
        }
        this.value2 = [start, end]
        this.getAllAum(start, end);
      },

      getNotifyList() {
        notifyService
          .list({
            current: this.tablePage.currentPage,
            size: this.tablePage.pageSize,
            orders: this.tablePage.orders,
            isSelf: true,
            ...this.searchForm,
          })
          .then(({
            data
          }) => {
            this.notifyList = data.records;
          });
      },



      getMenuList() {
        userService.getMenus().then(({
          data
        }) => {
          let routerList = data.routerList;
          let allList = [];
          routerList.forEach((item) => {
            if (item.href) {
              allList.push(item.href);
            }
            if (item.children.length > 0) {
              item.children.forEach((itemIn) => {
                if (itemIn.href) {
                  allList.push(itemIn.href);
                }
              });
            }
          });
          console.log(allList, "====================>allList");
          this.haveCJYQ = allList.includes("/parkmanagement/ParkManagementList");
          this.haveCJLY = allList.includes(
            "/buildinginfo/BuildingManagementList"
          );
          this.haveCJQY = allList.includes("/enterpriseinfo/EnterpriseInfoList");
          this.haveCJYG = allList.includes("/qyuser/QyUserList");
          this.haveSBSS = allList.includes("/saleinventory/SaleInventoryList");
          this.haveXXWH = allList.includes(
            "/enterpriseother/EnterpriseOtherList"
          );

          this.$router.push({
            name: "home"
          });
        });
      },

      changeColor() {
        this.textColor1 = "#FF1C1C";
        this.textColor4 = "#FF1C1C";
        this.isTop1 = false;
        this.isTop4 = false;
        this.isBottom1 = true;
        this.isBottom4 = true;
      },
    },
  };
</script>

<style scoped lang="less">
  .background-image {
    background-image: url("~@/assets/img/homePage/hou_bg2.png");
    background-position: bottom;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
  }

  .header {
    width: 100%;
    height: 20px;
  }

  .headline {
    width: 100%;
    height: 5%;
    position: relative;
  }

  .headline-text {
    margin-left: 4%;
    font-family: Alibaba PuHuiTi 2;
    font-weight: normal;
    font-size: 30px;
    color: #3c507e;
  }

  .main-1 {
    margin-left: 1.5%;
    width: 29%;
    height: 75%;
    background-image: url("~@/assets/img/homePage/hou_5.png");
    background-size: 100% 100%;
    border-radius: 10px;
  }

  .main-2 {
    margin-left: 1.5%;
    width: 29%;
    height: 75%;
    background-image: url("~@/assets/img/homePage/hou_4.png");
    background-size: 100% 100%;
    border-radius: 10px;
  }

  .main-3 {
    margin-left: 1.5%;
    width: 29%;
    height: 75%;
    background-image: url("~@/assets/img/homePage/hou_3.png");
    background-size: 100% 100%;
    border-radius: 10px;
  }

  .main-4 {
    margin-left: 1.5%;
    width: 30%;
    height: 75%;
    background-image: url("~@/assets/img/homePage/hou_2.png");
    background-size: 100% 100%;
    border-radius: 10px;
  }

  .main-5 {
    margin-left: 1.5%;
    width: 17%;
    height: 75%;
    background-image: url("~@/assets/img/homePage/hou_1.png");
    background-size: 100% 100%;
    border-radius: 10px;
  }

  .main {
    width: 100%;
    height: 30%;
    /* 开启Flexbox布局 */
    display: flex;
  }

  .footer {
    width: 100%;
    position: relative;
    top: -5%;
    // height: 43%;

  }

  .el-row {
    margin-bottom: 20px;
  }

  .footer-main {
    margin-left: 4%;
    width: 91%;
    border-radius: 10px;
    margin-top: 15px;
  }

  .footer-main-top {
    height: 26%;
    font-family: Alibaba PuHuiTi 2;
    font-weight: normal;
    font-size: 16px;
    color: #333333;
    margin-left: 2%;
  }

  .footer-fast {
    width: 100%;
    height: 64%;
    /* 开启Flexbox布局 */
    display: flex;
  }

  // .footer-fast-1 {
  //   margin-left: 5%;
  //   width: 4.5%;
  //   height: 100%;
  // }

  .footer-fast-2 {
    margin-left: 5%;
    width: 4.5%;
    height: 100%;
  }

  .footer-fast-1-1 p {
    margin: 10px;
    font-size: 14px;
    // width: 100%;
    // height: 53.84%;
    // background-image: url("~@/assets/img/homePage/hou_addyuan.png");
    // background-size: 100% 100%;

  }

  .footer-fast-1-2 {
    font-family: Alibaba PuHuiTi 2;
    font-weight: normal;
    font-size: 14px;
    text-align: center;
  }

  .footer-fast-2-1 {
    width: 100%;
    height: 53.84%;
    background-image: url("~@/assets/img/homePage/hou_addlou.png");
    background-size: 100% 100%;
  }

  .footer-fast-2-2 {
    width: 100%;
    height: 53.84%;
    background-image: url("~@/assets/img/homePage/hou_addqiye.png");
    background-size: 100% 100%;
  }

  .footer-fast-2-3 {
    width: 100%;
    height: 53.84%;
    background-image: url("~@/assets/img/homePage/hou_addren.png");
    background-size: 100% 100%;
  }

  .footer-fast-2-4 {
    width: 100%;
    height: 53.84%;
    background-image: url("~@/assets/img/homePage/hou_shuishou.png");
    background-size: 100% 100%;
  }

  .footer-fast-2-5 {
    width: 100%;
    height: 53.84%;
    background-image: url("~@/assets/img/homePage/hou_addint.png");
    background-size: 100% 100%;
  }

  .main-periphery {
    margin-left: 8%;
    width: 92%;
    height: 50%;
  }

  .main-periphery2 {
    margin-left: 0%;
    height: 50%;
  }

  .main-periphery-font {
    font-family: Alibaba PuHuiTi 2;
    font-weight: normal;
    font-size: 20px;
  }

  .main-periphery-numerical {
    font-family: Alibaba PuHuiTi 2;
    font-weight: bold;
    font-size: 40px;
  }

  .main-periphery-font-small {
    font-family: Alibaba PuHuiTi 2;
    font-weight: normal;
    font-size: 15px;
  }

  .roll-name-box {
    width: 100%;
    padding-left: 1vw;
    padding-right: 1vw;
    height: 3vh;
    color: #fff;
    background: #0f467a;
    line-height: 3vh;
    font-size: 1.5vh;
    overflow: hidden;
    white-space: nowrap;
  }

  .scroll-content {
    margin-left: 50%; // 把文字弄出可见区域
    width: 200%;
    animation: myMove 100s linear infinite; // 重点，定义动画
    animation-fill-mode: forwards;
    color: #fff;
  }

  @keyframes myMove {
    0% {
      transform: translateX(0%);
    }

    100% {
      transform: translateX(-100%);
    }
  }
</style>