综合展示分析

Surpriseplus

2022-12-13 950c7bf191b173b45eedd08fd2d576bb093186ca

 src/views/Thematic/index.vue

@@ -1,6 +1,138 @@
<template>
  <div class="themaic">
    <el-card style="height: 100%">
    <div class="headera-title">
      <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item>
            <label class="th_title">{{ $t('themaic.name') }}</label>
          </el-form-item>
          <el-form-item>
            <el-input
              :placeholder="$t('common.pleaseInput')"
              suffix-icon="el-icon-search"
              v-model="input3"
            />
          </el-form-item>
          <el-form-item>
            <div class="title_count" style="color: white">
              {{ $t('themaic.find') }}
              <label style="magin: 0% 15px">{{ listcount }}</label>
              {{ $t('themaic.record') }}
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="header_right">
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item :label="$t('themaic.maptltle')">
            <el-select
              v-model="selvalue"
              class="m-2"
              placeholder="Select"
              style="width: 150px"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <div class="margin-right: 32px;">
              <label style="margin-right: 10px; color: white"
                >{{ $t('themaic.sortbytime') }}:</label
              >

              <i
                @click="changetime(1)"
                :class="{ active: timeindex == 1 }"
                class="el-icon-caret-bottom"
              ></i>

              <i
                @click="changetime(2)"
                :class="{ active: timeindex == 2 }"
                class="el-icon-caret-top"
              ></i>
            </div>
          </el-form-item>
          <el-form-item>
            <div>
              <label style="margin-right: 10px; color: white"
                >{{ $t('themaic.sortbyviews') }}:</label
              >

              <i
                @click="changeChecked(1)"
                :class="{ active: checkindex == 1 }"
                class="el-icon-caret-bottom"
              ></i>

              <i
                @click="changeChecked(2)"
                :class="{ active: checkindex == 2 }"
                class="el-icon-caret-top"
              ></i>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="themaic_content">
      <div
        @click="showThematic(item)"
        v-for="(item, i) in middleList"
        class="midedle_div"
        :key="i"
      >
        <el-card class="middle_card">
          <table>
            <tr>
              <td>
                <div class="midddle_title">
                  <div class="t1">{{ item.name }}</div>
                  <div>
                    <label class="t2">{{ item.time }}</label
                    ><label class="t2">浏览{{ item.count }}次</label>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div
                  class="middle_image"
                  :style="{
                    background: 'url(' + item.url + ') no-repeat center',
                    'background-size': '100% 100%',
                  }"
                ></div>
              </td>
            </tr>
            <tr>
              <td></td>
            </tr>
          </table>
        </el-card>
      </div>
    </div>
    <div style="display: flex; justify-content: center">
      <div class="pagination_box">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="1"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
        >
        </el-pagination>
      </div>
    </div>
    <!-- <el-card style="height: 100%">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="th_title">{{ $t('themaic.name') }}</div>
@@ -95,7 +227,7 @@



           </div> -->
           </div>

            <table>
              <tr>
@@ -126,13 +258,7 @@
          </el-card>
        </div>
      </el-card>
      <el-pagination
        layout="prev, pager, next, jumper"
        :total="pagesize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
      -->
    <el-dialog
      class="themaic_dialog"
      :modal-append-to-body="true"
@@ -142,7 +268,11 @@
      width="99%"
      :before-close="handleClose"
    >
      <map-View @close="close" :typeIndex="typeIndex"></map-View>
      <map-View
        v-if="dialogVisible"
        @close="close"
        :typeIndex="typeIndex"
      ></map-View>
    </el-dialog>
  </div>
</template>
@@ -157,7 +287,8 @@
    return {
      dialogVisible: false,
      input3: '',
      listcount: 7,
      count: 0,
      listcount: 0,
      checkindex: 1,
      timeindex: 1,
      pagesize: 10,
@@ -230,7 +361,10 @@
      typeIndex: '',
    };
  },
  mounted() {},
  mounted() {
    this.count = this.middleList.length;
    this.listcount = this.middleList.length;
  },
  created() {
    var val = this.$store.state.currentPerms;
    var permsEntity = this.$store.state.permsEntity;
@@ -274,94 +408,207 @@
    },
    showThematic(res) {
      this.typeIndex = res.index;
      this.dialogVisible = true;

      // var url = "http://localhost/" + res.pop;
      // window.open(
      //   url,
      //   "newwindow",
      //   "height=750, width=1400, top=150,left=400 "
      // );
      this.dialogVisible = true;
    },
  },
};
</script>

<style>
<style lang="less" scoped>
.themaic {
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  background: #303030;

  .headera-title {
    width: calc(100% - 2px);
    height: 70px;
    display: flex;
    justify-content: space-between;
    background: #353539;
    .th_title {
      width: 81px;
      height: 20px;
      font-size: 21px;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #009cff;
      line-height: 49px;
      margin-left: 30px;
      bottom: 24px;
    }

    .title_count {
      height: 18px;
      font-size: 19px;
      font-family: Source Han Sans CN;
      font-weight: 200;
      color: #ffffff;
    }
    .header_right {
      float: right;
      margin-right: 30px;

      height: 100%;
      width: auto;
    }
    .active {
      color: #409eff;
    }
  }
  .themaic_content {
    width: calc(100% - 54px);
    height: 80%;
    display: flex;
    flex-flow: row wrap;

    justify-content: flex-start;
    padding: 17px 27px 0px 27px;

    .midedle_div {
      width: 456px;
      height: 303px;
      margin-right: 10px;
      .t1 {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
        line-height: 35px;
      }
      .middle_image {
        height: 220px;
        width: 415px;
      }
      .t2 {
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
        line-height: 35px;
      }
      .midddle_title {
        display: flex;
        justify-content: space-between;
      }
    }
    .themic_middle_card {
      border: transparent;
    }
    /deep/.el-card {
      background: #454545;
      border: 1px solid #454545;
    }
  }
  .pagination_box {
    /deep/.el-input__inner {
      background-color: transparent !important;
      border: 1px solid;
      color: white;
    }
    /deep/.el-pagination__total {
      color: white;
    }
    /deep/.el-pagination__jump {
      color: white;
    }
    /deep/.el-pager li.active {
      color: #409eff;
    }
    /deep/.el-pager li {
      color: white;
      background: transparent;
    }
    /deep/.el-pager li {
      color: white;
    }
    /deep/.btn-prev {
      background: transparent;
    }
    /deep/.btn-next {
      background: transparent;
    }
  }
  /deep/.el-form-item__content {
    line-height: 70px;
  }
  /deep/ .el-input__inner {
    border: 1px solid white;
    color: white;
  }
  /deep/.el-form-item__label {
    color: white;
    line-height: 70px;
  }
  /deep/ .el-form--inline .el-form-item {
    margin-right: 32px;
  }
}

.themaic .el-divider--horizontal {
  margin: 10px 0 !important;
}
// .themaic .el-divider--horizontal {
//   margin: 10px 0 !important;
// }

.themaic .th_title {
  font-size: 22px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #3b4d6e;
}
// .themaic .th_title {
//   font-size: 22px;
//   font-family: Microsoft YaHei;
//   font-weight: bold;
//   color: #3b4d6e;
// }

.radiusSearch .el-input__wrapper {
  border-radius: 50px;
}
// .radiusSearch .el-input__wrapper {
//   border-radius: 50px;
// }

.themaic .active {
  color: #409eff;
}
// .themaic .active {
//   color: #409eff;
// }

.themaic .themic_middle_card {
  border: transparent;
}
// .themaic .themic_middle_card {
//   border: transparent;

.themaic .themic_middle_card .el-card__body {
  padding: 0px;
}
// }

.themaic .midedle_div {
  width: 23.5%;
  height: 250px;
  float: left;
  margin-right: 1%;
  margin-bottom: 1%;
  position: relative;
}
// .themaic .themic_middle_card .el-card__body {
//   padding: 0px;
// }

.themaic .midedle_div .middle_card {
  width: 100%;
  height: 100%;
}
// .themaic

.themaic .midedle_div .middle_card .el-card__body {
  padding: 10px;
}
// .themaic .midedle_div .middle_card {
//   width: 100%;
//   height: 100%;
// }

.themaic .midedle_div .t1 {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #000000;
}
// .themaic .midedle_div .middle_card .el-card__body {
//   padding: 10px;
// }

.themaic .midedle_div .t2 {
  font-size: 13px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #3f3f3f;
  margin-right: 10px;
}
// .themaic .midedle_div .t1 {
//   font-size: 16px;
//   font-family: Microsoft YaHei;
//   font-weight: bold;
//   color: #000000;
// }

.themaic .midedle_div .middle_image {
  width: 94%;
  /* margin-top: 10px; */
  height: 73%;
  position: absolute;
}
// .themaic .midedle_div .t2 {
//   font-size: 13px;
//   font-family: Microsoft YaHei;
//   font-weight: 400;
//   color: #3f3f3f;
//   margin-right: 10px;
// }

// .themaic .midedle_div .middle_image {
//   width: 94%;
//   /* margin-top: 10px; */
//   height: 73%;
//   position: absolute;
// }
</style>
<style>
.themaic_dialog .el-dialog {
@@ -386,8 +633,8 @@
  margin: 0;
  font-size: 20px;
}

/* .themaic .el-dialog .el-dialog__header .el-dialog__headerbtn {
  color: #fff;
} */
.el-card {
  background: #303030;
  border: 0px;
}
</style>