1

PC-20250623MANY\Administrator

2025-08-23 368676106d5a6e29b6447a8f3a09990cf78aab66

1

 src/assets/images/news_icon.png

 src/assets/images/news_icon_a.png

 src/assets/style/variables.scss

@@ -9,3 +9,8 @@
.el-tabs__item {
  color: #eee;
}
.el-drawer,
.el-table {
  background-color: #333;
  color: #fff;
}

 src/components/myHead.vue

@@ -107,6 +107,26 @@

          <div
            class="nav-item"
            @click="toRouter('/news')"
            :class="`${$route.path == '/news' ? 'sc_c' : ''}`"
          >
            <img
              src="@/assets/images/news_icon_a.png"
              alt="news"
              class="nav-icon"
              v-if="$route.path == '/news'"
            />
            <img
              src="@/assets/images/news_icon.png"
              alt="news"
              class="nav-icon"
              v-else
            />
            <span>{{ $t("hj6") }}</span>
          </div>

          <div
            class="nav-item"
            @click="toRouter('/account')"
            :class="`${$route.path == '/account' ? 'sc_c' : ''}`"
          >
@@ -255,7 +275,7 @@

<style lang="scss" scoped>
.header {
  // background-color: white;
  background-color: #13161e;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 0 16px;
  position: sticky;

 src/router/index.js

@@ -60,6 +60,14 @@
        /* webpackChunkName: "aiTrading" */ "../views/aiTrading/aiTrading.vue"
      ),
  },
  {
    path: "/news",
    name: "news",
    component: () =>
      import(
        /* webpackChunkName: "news" */ "../views/news/List.vue"
      ),
  },
];

const router = new VueRouter({

 src/views/home/components/HomeRight.vue

@@ -199,7 +199,7 @@
  },
  created() {
    this.getMoney();
    this.getExchangeRate();
    // this.getExchangeRate();
  },
  methods: {
    changeTab(index) {

 src/views/news/List.vue

New file
@@ -0,0 +1,148 @@
<template>
  <div class="news page-content">
    <div class="box_head">
      <div class="page-w2 head_content flex-between">
        <div class="head_left flex-center">
          <img src="@/assets/images/news_icon.png" alt="news Investment" />
          <span>{{ $t("hj6") }}</span>
        </div>
      </div>
    </div>

    <template v-if="tableData && tableData.length > 0">
      <div class="box_content page-w2">
        <div class="content_item" v-for="i in tableData" :key="i.id" @click="buyOpen(i)">
          <el-row :gutter="20">
            <el-col :span="18">
              <div class="flex-start item_label">
                <div class="label_1">{{ i.title }}</div>
              </div>
              <div class="flex-start item_label">
                <div class="label_2">{{ i.showTime | gettime }}</div>
              </div>
            </el-col>

            <el-col :span="6">
              <img :src="i.imgurl" alt="" class="item_img" />
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="flex-end page-w2">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :current-page="pageNum"
          :page-size="pageSize"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </template>

    <el-empty :description="$t('zwsj')" v-else></el-empty>

    <Details
      :dialogVisible.sync="buyVisible"
      v-if="buyVisible"
      :dataObj="openObj"
      @onClose="onClose"
    ></Details>
  </div>
</template>

<script>
import * as api from "@/axios/api";
import Details from "./components/Details";
import mixins from "@/mixins/myMixins"; // 混入
export default {
  name: "news",
  mixins: [mixins],
  components: {
    Details,
  },
  data() {
    return {
      // 列表参数,必须是opt和myMixins混入配合使用
      opt: {
        type: 1,
      },
      buyVisible: false,
      openObj: {}, // 打开弹窗的数据
    };
  },
  created() {
    this.apiInterface = api.getNewsList; // 赋值接口
    this.init(); // 获取列表
  },
  methods: {
    // 打开详情弹窗
    buyOpen(item) {
      this.openObj = item; // 赋值
      this.buyVisible = true; // 打开弹窗
    },
    // 关闭弹窗
    onClose() {
      this.openObj = {};
    },
  },
};
</script>

<style lang="scss" scoped>
.news {
  .box_content {
    padding: 16px 0;
    .content_item {
      border: 1px solid #f1f1f1;
      border-radius: 16px;
      padding: 10px;
      margin: 16px 0;
      background-color: #444;
      font-size: 14px;
      cursor: pointer;
      .item_img {
        width: 200px;
        height: auto;
        border-radius: 10px;
      }
      .item_head {
        font-size: 16px;
        margin-bottom: 20px;
      }
      .item_label {
        padding-bottom: 16px;
        .label_1 {
          color: #ccc;
          font-size: 18px;
          //   margin-right: 28px;
        }
        .label_2 {
          font-size: 16px;
          color: #aaa;
        }
      }
    }
  }
  .box_head {
    background-color: #444;

    .head_content {
      padding: 32px 0;

      .head_left {
        font-size: 28px;
        font-weight: 700;

        img {
          width: 32px;
          height: 32px;
          margin-right: 8px;
        }
      }
    }
  }
}
</style>

 src/views/news/components/Details.vue

New file
@@ -0,0 +1,78 @@
<template>
  <el-drawer
    :title="dataObj.title"
    :visible.sync="dialogVisible"
    direction="rtl"
    :before-close="onClose"
    size="980px"
  >
    <div class="drawer-content">
      <h2>{{ dataObj.title }}</h2>
      <div class="time">{{ dataObj.showTime | gettime }}</div>
      <div class="news_content">{{ dataObj.content }}</div>
      <img class="news_img" :src="dataObj.imgurl" alt="">
    </div>
  </el-drawer>
</template>

<script>
import * as api from "@/axios/api";
export default {
  data() {
    return {
      opt: {}, // 列表参数,必须是opt和myMixins混入配合使用
    };
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    dataObj: {
      type: Object,
      default: () => {},
    },
  },
  watch: {},
  async created() {},
  methods: {
    // 关闭弹窗
    onClose() {
      this.$emit("update:dialogVisible", false);
      this.$emit("onClose"); // 关闭弹窗时，通知父组件
    },
  },
};
</script>

<style lang="scss" scoped>
.drawer-content {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  .news_img{
    width: 600px;
    height: auto;
    margin: 0 auto;
  }
  .news_content {
    margin: 20px 0;
    font-size: 16px;
  }
  .time {
    font-size: 14px;
    padding-bottom: 10px;
    border-bottom: solid 1px #ccc;
  }
  h2 {
    font-size: 20px;
    margin-bottom: 24px;
  }

  .pagination {
    margin-top: 20px;
    text-align: center;
  }
}
</style>