fengjie-datascreen/src/views/sentiment/index.vue

<template>
  <Header title="舆情检测" is-back />
  <CoreVideo />
  <div class="container">
    <div class="flex">
      <div class="box-1 mr-10">
        <Title1 title="最新舆情" />
        <div class="list">
          <div class="item" v-for="item in 20">
            <p class="status status-error">负面</p>
            <p class="content">
              这是一条关于三侠之颠旅游舆情的负面新闻这是一条关于三侠之颠旅游舆情的负面这是一条关于三侠之颠旅游舆情的负面新闻这是一条关于三侠之颠旅游舆情的负面
            </p>
            <p class="date">2024-12.16 23:58</p>
          </div>
        </div>
      </div>
      <div class="box-2 mr-10">
        <div class="flex justify-center">
          <div class="top flex justify-evenly">
            <count-item label="今日舆情总数" :count="35600" suffix="条" color="#fff" />
            <count-item label="今日正面舆情" :count="35600" suffix="条" color="#fff" />
            <count-item label="今日负面舆情" :count="35600" suffix="条" color="#fff" />
          </div>
        </div>
        <div class="flex mt-20 gap-8 ml-8 mr-8">
          <div class="border flex-1">
            <Title3 title="山峡之巅" />
            <pie-row :width="500" :height="330" />
          </div>
          <div class="border flex-1">
            <Title3 title="山峡之巅" />
            <pie-row :width="500" :height="330" />
          </div>
          <div class="border flex-1">
            <Title3 title="山峡之巅" />
            <pie-row :width="500" :height="330" />
          </div>
        </div>
      </div>
      <div class="box-1">
        <Title1 title="数据来源分析" />
        <data-source />
      </div>
    </div>
    <div class="flex mt-10">
      <div class="box-2 mr-10">
        <Title1 title="舆情指数" />
        <Line
          :width="1560"
          :height="400"
          :data="[
            {
              name: '企业数',
              data: [64, 159, 112, 86, 151, 131, 118, 232, 23, 64, 159, 112, 86, 151, 131, 118]
            },
            {
              name: '交易量',
              data: [124, 30, 77, 97, 67, 75, 70, 334, 123, 124, 30, 77, 97, 67, 75, 70]
            }
          ]"
          :xAxisData="xAxisData"
          :seriesConfig="{ smooth: false, symbol: 'circle' }"
        />
      </div>
      <div class="box-1 mr-10">
        <Title1 title="情感分布" />
        <emotion />
      </div>
      <div class="box-1 mr-10">
        <Title1 title="词频分析" />
        <word-cloud />
      </div>
    </div>
  </div>
  <Correspondence />
</template>

<script setup>
  import emotion from './components/emotion.vue'
  import wordCloud from './components/wordCloud.vue'
  import dataSource from './components/dataSource.vue'
  let xAxisData = ref([
    '12-16 10:00',
    '12-16 14:00',
    '12-16 16:00',
    '12-16 22:00',
    '12-17 02:00',
    '12-17 06:00',
    '12-17 10:00',
    '12-17 14:00',
    '12-17 16:00',
    '12-16 22:00',
    '12-18 02:00',
    '12-18 06:00',
    '12-8 10:00',
    '12-18 14:00',
    '12-18 16:00',
    '12-18 20:00'
  ])
</script>

<style scoped lang="scss">
  .container {
    flex: 1;
    margin: vh(120) vw(10) 0 vw(10);
    .bg {
      background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
    }
    .top {
      width: vw(600);
      margin-top: vh(35);
    }
    .box-1 {
      width: vw(770);
      height: vh(470);
      @extend .bg;
    }
    .box-2 {
      width: vw(1574);
      height: vh(470);
      @extend .bg;
    }
    .border {
      background-image: url('@/assets/images/bg-3.png');
      background-size: 100% 100%;
    }
    .list {
      margin: 0 vw(20);
      overflow-y: auto;
      height: vh(400);
      /* 滚动条整体样式 */
      &::-webkit-scrollbar {
        width: vw(4); /* 滚动条的宽度 */
      }
      /* 滚动条轨道 */
      &::-webkit-scrollbar-track {
        background: 'transparent'; /* 轨道的背景色 */
      }
      /* 滚动条滑块 */
      &::-webkit-scrollbar-thumb {
        background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
        border-radius: 5px; /* 滑块的圆角 */
      }
      .item {
        display: flex;
        align-items: center;
        height: vh(40);
        &:nth-child(2n + 1) {
          background: rgba(3, 78, 153, 0.3);
        }
        .status {
          width: vw(40);
          height: vh(20);
          line-height: vh(20);
          text-align: center;
          margin: 0 vw(20);
          font-weight: 400;
          font-size: vw(12);
          color: #ffffff;
          border-radius: vw(2);
          &-error {
            @extend .status;
            background: #d9011b;
          }
          &-warning {
            @extend .status;
            background: #feae00;
          }
          &-primary {
            @extend .status;
            background: #2380fb;
          }
        }
        .content {
          flex: 1;
          font-weight: 400;
          font-size: vw(15);
          color: #ffffff;
          white-space: nowrap; /* 保证文本在一行内显示 */
          overflow: hidden; /* 隐藏溢出的内容 */
          text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
        }
        .date {
          margin: 0 vw(20);
          font-weight: 400;
          font-size: vw(12);
          color: rgba(255, 255, 255, 0.7);
        }
      }
    }
  }
</style>