修复新闻领域分类布局

src/views/newsBrief/NewsMain.vue

 <template>
-    <el-space direction="vertical" class="full-width" :size=24>
-        <el-radio-group class="radio-group-as-radius-btn">
-            <el-space>
-                <el-radio-button v-for="item in moduleList" :key="item.moduleId" :value="item.moduleId"
-                    @click="() => gotoNewsModule(item.moduleId, item.moduleName, false)">{{
-                        item.moduleName
-                    }} ></el-radio-button>
+	<el-space direction="vertical" class="full-width" :size="24">
+		<el-radio-group class="radio-group-as-radius-btn top-radio-box">
+			<el-space wrap>
+				<el-radio-button
+					v-for="item in moduleList"
+					:key="item.moduleId"
+					:value="item.moduleId"
+					@click="() => gotoNewsModule(item.moduleId, item.moduleName, false)"
+					>{{ item.moduleName }} ></el-radio-button
+				>
 				<!-- <el-radio-button value="nul"><img src="@/assets/icons/adjustment.png" /></el-radio-button> -->
 			</el-space>
 		</el-radio-group>
@@ -26,44 +29,57 @@
 				</template>
 
 				<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"
-                        @click="() => gotoNewsDetail(item.newsId)" alignment="center">
-                        <common-text class="text-bold text-hover"
-                            :color="index === 0 ? 'var(--color-red-100)' : (index === 1 ? 'var(--color-orange-100)' : 'var(--text-primary-65-color)')">
+					<el-space
+						v-for="(item, index) in subjectData.slice(0, 3)"
+						:key="index"
+						@click="() => gotoNewsDetail(item.newsId)"
+						alignment="center"
+					>
+						<common-text
+							class="text-bold text-hover"
+							:color="
+								index === 0
+									? 'var(--color-red-100)'
+									: index === 1
+										? 'var(--color-orange-100)'
+										: 'var(--text-primary-65-color)'
+							"
+						>
 							{{ `${index + 1}` }}
 						</common-text>
 						<common-text class="text-bold text-hover" color="var(--text-primary-80-color)">{{
 							item.newsTitle
 						}}</common-text>
 					</el-space>
-                    <el-space v-for="(item, index) in subjectData.slice(3)" :key="index"
-                        @click="() => gotoNewsDetail(item.newsId)">
+					<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>
 <script setup>
 import { ref, onMounted } from "vue";
-import '@/styles/common.scss';
-import '@/styles/container.scss';
-import '@/styles/radio.scss';
+import "@/styles/common.scss";
+import "@/styles/container.scss";
+import "@/styles/radio.scss";
 import { useGotoNewsModule, useGotoNewsDetail } from "@/router/modules/news";
 import { getMoudleType, getTodayNews, getHotNews } from "@/api/news/newsBrief";
 import { ElInput, ElSpace, ElImage, ElDivider, ElCol, ElRow, ElRadioButton, ElRadioGroup } from "element-plus";
 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";
 //博弈专题新闻数据
 const subjectData = ref([]);
 // 今日要闻
-const HeadlinesData = ref([
-]);
+const HeadlinesData = ref([]);
 const moduleList = ref([]);
 const gotoNewsDetail = useGotoNewsDetail();
 const gotoNewsModule = useGotoNewsModule();
@@ -78,7 +94,7 @@ const handleGetModuleType = async () => {
 		if (res.code === 200 && res.data) {
 			moduleList.value = res.data;
 		}
-    } catch (error) { }
+	} catch (error) {}
 };
 
 async function updateToday() {
@@ -90,15 +106,17 @@ async function updateHotNews() {
 	subjectData.value = hotNews ?? [];
 }
 
-
 async function initData() {
 	await handleGetModuleType();
 	await updateToday();
 	await updateHotNews();
 }
-
 </script>
 
 <style lang="scss" scoped>
 @import url("./style.css");
+
+.top-radio-box {
+	margin: 0 80px;
+}
 </style>