完成适配移动端

pages/page/[id].vue

@@ -2,19 +2,19 @@
   <!-- Banner -->
   <Banner :layout="layout" />
   <!-- 主体部分 -->
-  <div class="xl:w-screen-xl m-auto py-4 mt-20">
+  <div class="xl:w-screen-xl m-auto py-4 mt-12 px-4 sm:px-0 sm:mt-20">
     <el-page-header :icon="ArrowLeft" @back="goBack">
       <template #content>
-        <span class="text-large font-600 mr-3"> {{ page.title || '页面标题' }} </span>
+        <span class="text-large font-600"> {{ page.title || '页面标题' }} </span>
       </template>
-      <el-card shadow="hover" class=" my-5">
-        <el-image :src="page?.design?.photo" class="right max-w-lg" />
+      <el-card shadow="hover" class="my-5 sm:my-10 sm:px-2">
+        <el-image v-if="page?.design?.photo" :src="page?.design?.photo" class="right max-w-lg" />
         <!-- 新闻详细 -->
         <div class=" bg-white">
           <!-- 内容组件 -->
           <Content class="content text-lg py-3" :data="page.design?.content" />
 
-          <h3 class="tag">{{ $t('articleUrl') }}：{{ locationUrl() }} </h3>
+          <h3 class="tag" @click="copyText(locationUrl())">{{ $t('articleUrl') }}：{{ locationUrl() }} </h3>
         </div>
       </el-card>
     </el-page-header>
@@ -24,7 +24,7 @@
 <script setup lang="ts">
 import {useLayout, usePage} from "~/composables/configState";
 import type {CmsNavigation} from "~/api/cms/cmsNavigation/model";
-import {getNavIdByParamsId, getViews, locationUrl, paramsId} from "~/utils/common";
+import {copyText, getNavIdByParamsId, getViews, locationUrl, paramsId} from "~/utils/common";
 import Left from "~/components/Left.vue";
 import { ArrowLeft,View } from '@element-plus/icons-vue'
 import {getCmsNavigation, listCmsNavigation} from "~/api/cms/cmsNavigation";