Skip to content

R
risk-monitor
提交 ba800b15 authored 作者: hsx's avatar hsx
浏览文件
操作

合并分支 'hsx' 到 'pre'

修复新闻领域分类布局 查看合并请求 !365
上级 42dc6b52 f08486b0
流水线 #532 已通过 于阶段
      in 2 分 54 秒
      隐藏空白字符变更
      内嵌 并排
      正在显示 包含 87 行增加 和 70 行删除
      src/views/newsBrief/NewsMain.vue
      浏览文件 @ ba800b15
      <template> <template>
      <el-space direction="vertical" class="full-width" :size=24> <el-space direction="vertical" class="full-width" :size="24">
      <el-radio-group class="radio-group-as-radius-btn"> <el-radio-group class="radio-group-as-radius-btn top-radio-box">
      <el-space> <el-space wrap>
      <el-radio-button v-for="item in moduleList" :key="item.moduleId" :value="item.moduleId" <el-radio-button
      @click="() => gotoNewsModule(item.moduleId, item.moduleName, false)">{{ v-for="item in moduleList"
      item.moduleName :key="item.moduleId"
      }} ></el-radio-button> :value="item.moduleId"
      <!-- <el-radio-button value="nul"><img src="@/assets/icons/adjustment.png" /></el-radio-button> --> @click="() => gotoNewsModule(item.moduleId, item.moduleName, false)"
      </el-space> >{{ item.moduleName }} ></el-radio-button
      </el-radio-group> >
      <!-- <el-radio-button value="nul"><img src="@/assets/icons/adjustment.png" /></el-radio-button> -->
      </el-space>
      </el-radio-group>
      <el-space :size="16" alignment="flex-start"> <el-space :size="16" alignment="flex-start">
      <box-background width="712px" height="100%" title="今日要闻"> <box-background width="712px" height="100%" title="今日要闻">
      <template #header-icon> <template #header-icon>
      <img src="@/assets/icons/Headlines-icon.svg" /> <img src="@/assets/icons/Headlines-icon.svg" />
      </template> </template>
      <div class="common-padding"> <div class="common-padding">
      <news-list :news="HeadlinesData" /> <news-list :news="HeadlinesData" />
      </div> </div>
      </box-background> </box-background>
      <box-background width="712px" height="100%" title="中美博弈专题"> <box-background width="712px" height="100%" title="中美博弈专题">
      <template #header-icon> <template #header-icon>
      <img src="@/assets/icons/subject-icon.png" /> <img src="@/assets/icons/subject-icon.png" />
      </template> </template>
      <el-space :size="16" direction="vertical" fill class="full-width common-padding"> <el-space :size="16" direction="vertical" fill class="full-width common-padding">
      <el-space v-for="(item, index) in subjectData.slice(0, 3)" :key="index" <el-space
      @click="() => gotoNewsDetail(item.newsId)" alignment="center"> v-for="(item, index) in subjectData.slice(0, 3)"
      <common-text class="text-bold text-hover" :key="index"
      :color="index === 0 ? 'var(--color-red-100)' : (index === 1 ? 'var(--color-orange-100)' : 'var(--text-primary-65-color)')"> @click="() => gotoNewsDetail(item.newsId)"
      {{ `${index + 1}` }} alignment="center"
      </common-text> >
      <common-text class="text-bold text-hover" color="var(--text-primary-80-color)">{{ <common-text
      item.newsTitle class="text-bold text-hover"
      }}</common-text> :color="
      </el-space> index === 0
      <el-space v-for="(item, index) in subjectData.slice(3)" :key="index" ? 'var(--color-red-100)'
      @click="() => gotoNewsDetail(item.newsId)"> : index === 1
      <common-text class="text-regular text-hover" color="var(--text-primary-80-color)">{{ ? 'var(--color-orange-100)'
      "• " + item.newsTitle : 'var(--text-primary-65-color)'
      }}</common-text> "
      </el-space> >
      </el-space> {{ `${index + 1}` }}
      </box-background> </common-text>
      <common-text class="text-bold text-hover" color="var(--text-primary-80-color)">{{
      </el-space> item.newsTitle
      </el-space> }}</common-text>
      </el-space>
      <el-space
      v-for="(item, index) in subjectData.slice(3)"
      :key="index"
      @click="() => gotoNewsDetail(item.newsId)"
      >
      <common-text class="text-regular text-hover" color="var(--text-primary-80-color)">{{
      "• " + item.newsTitle
      }}</common-text>
      </el-space>
      </el-space>
      </box-background>
      </el-space>
      </el-space>
      </template> </template>
      <script setup> <script setup>
      import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
      import '@/styles/common.scss'; import "@/styles/common.scss";
      import '@/styles/container.scss'; import "@/styles/container.scss";
      import '@/styles/radio.scss'; import "@/styles/radio.scss";
      import { useGotoNewsModule, useGotoNewsDetail } from "@/router/modules/news"; import { useGotoNewsModule, useGotoNewsDetail } from "@/router/modules/news";
      import { getMoudleType, getTodayNews, getHotNews } from "@/api/news/newsBrief"; import { getMoudleType, getTodayNews, getHotNews } from "@/api/news/newsBrief";
      import { ElInput, ElSpace, ElImage, ElDivider, ElCol, ElRow, ElRadioButton, ElRadioGroup } from "element-plus"; import { ElInput, ElSpace, ElImage, ElDivider, ElCol, ElRow, ElRadioButton, ElRadioGroup } from "element-plus";
      import CommonText from "@/components/base/texts/CommonText.vue"; import CommonText from "@/components/base/texts/CommonText.vue";
      import BoxBackground from '@/components/base/boxBackground/overviewNormalBox.vue' import BoxBackground from "@/components/base/boxBackground/overviewNormalBox.vue";
      import NewsList from "./NewsList.vue"; import NewsList from "./NewsList.vue";
      //博弈专题新闻数据 //博弈专题新闻数据
      const subjectData = ref([]); const subjectData = ref([]);
      // 今日要闻 // 今日要闻
      const HeadlinesData = ref([ const HeadlinesData = ref([]);
      ]);
      const moduleList = ref([]); const moduleList = ref([]);
      const gotoNewsDetail = useGotoNewsDetail(); const gotoNewsDetail = useGotoNewsDetail();
      const gotoNewsModule = useGotoNewsModule(); const gotoNewsModule = useGotoNewsModule();
      onMounted(async () => { onMounted(async () => {
      await initData(); await initData();
      }); });
      const handleGetModuleType = async () => { const handleGetModuleType = async () => {
      try { try {
      const res = await getMoudleType(); const res = await getMoudleType();
      console.log("模块类别", res); console.log("模块类别", res);
      if (res.code === 200 && res.data) { if (res.code === 200 && res.data) {
      moduleList.value = res.data; moduleList.value = res.data;
      } }
      } catch (error) { } } catch (error) {}
      }; };
      async function updateToday() { async function updateToday() {
      const { data: todayNews } = await getTodayNews(); const { data: todayNews } = await getTodayNews();
      HeadlinesData.value = todayNews ?? []; HeadlinesData.value = todayNews ?? [];
      } }
      async function updateHotNews() { async function updateHotNews() {
      const { data: hotNews } = await getHotNews(); const { data: hotNews } = await getHotNews();
      subjectData.value = hotNews ?? []; subjectData.value = hotNews ?? [];
      } }
      async function initData() { async function initData() {
      await handleGetModuleType(); await handleGetModuleType();
      await updateToday(); await updateToday();
      await updateHotNews(); await updateHotNews();
      } }
      </script> </script>
      <style lang="scss" scoped> <style lang="scss" scoped>
      @import url("./style.css"); @import url("./style.css");
      </style>
      \ No newline at end of file .top-radio-box {
      margin: 0 80px;
      }
      </style>
      Markdown 格式
      0% 或
      您添加了 0 人 到此讨论。请谨慎行事。
      请先完成此评论的编辑！
      请 注册 或者 后发表评论