平衡表列表、关联图表ui样式调整

src/lang/cn.js

@@ -14,7 +14,7 @@ export default {
   // 表格tabbar
   tableTabbar: {
     shared_table: '共享表格',
-    timeline_table: '时间序列表格',
+    timeline_table: '时间序列',
     mixed_table: '混合表格',
     balance_sheet: '平衡表',
   },
@@ -35,6 +35,7 @@ export default {
     confirm: '确定',
     please_enter_category: '请输入分类名称',
     cancel: '取消',
+    chart: '关联图表',
     refresh: '刷新',
     download: '下载',
     delete: '删除',

src/lang/en.js

@@ -33,6 +33,7 @@ export default {
     add_category: 'Add Category',
     confirm: 'Confirm',
     please_enter_category: 'Please enter the category name',
+    chart: 'Chart',
     cancel: 'Cancel',
     refresh: 'Refresh',
     download: 'Download',

src/router/sheetList.js

@@ -10,25 +10,25 @@ export const sheetListRoutes=[
                 path: "/shared/list",
                 name: "sharedList",
                 component: () => import("@/views/sheetList/sharedList.vue"),
-                meta: { title: "共享表格",noBack:true },
+                meta: { title: "共享表格",noBack:true, noHead:true },
             },
             {
                 path: "/timeline/list",
                 name: "timelineList",
                 component: () => import("@/views/sheetList/timelineList.vue"),
-                meta: { title: "时间排序表格",noBack:true },
+                meta: { title: "时间排序表格",noBack:true, noHead:true },
             },
             {
                 path: "/mixed/list",
                 name: "mixedList",
                 component: () => import("@/views/sheetList/mixedList.vue"),
-                meta: { title: "混合表格",noBack:true },
+                meta: { title: "混合表格",noBack:true, noHead:true },
             },
             {
                 path: "/balance/list",
                 name: "balanceList",
                 component: () => import("@/views/sheetList/balanceList.vue"),
-                meta: { title: "平衡表",noBack:true },
+                meta: { title: "平衡表",noBack:true, noHead:true},
             },
         ],
         meta: { 
@@ -39,24 +39,24 @@ export const sheetListRoutes=[
         path: "/shared/search",
         name: "sharedSearch",
         component: () => import("@/views/sheetList/sharedSearch.vue"),
-        meta: { title: "共享表格" },
+        meta: { title: "共享表格", noHead:true },
     },
     {
         path: "/shared/detail",
         name: "sharedDetail",
         component: () => import("@/views/sheetList/sharedDetail.vue"),
-        meta: { title: "共享表格" },
+        meta: { title: "共享表格", noHead:true  },
     },
     {
         path: "/balance/detail",
         name: "balanceDetail",
         component: () => import("@/views/sheetList/balanceDetail.vue"),
-        meta: { title: "共享表格" },
+        meta: { title: "共享表格", noHead:true},
     },
     {
         path: "/balance/chart",
         name: "balanceChart",
         component: () => import("@/views/sheetList/balanceChart.vue"),
-        meta: { title: "共享表格" },
+        meta: { title: "共享表格", noHead:true},
     }
 ]

src/views/sheetList/Index.vue

@@ -10,29 +10,29 @@ const tabbarList = computed(() => {
     return [
         {
             name:"shared",
-            icon:getStaticImg('tabbar/home.png'),
-            iconActive:getStaticImg('tabbar/home-s.png'),
+            // icon:getStaticImg('tabbar/home.png'),
+            // iconActive:getStaticImg('tabbar/home-s.png'),
             text: globalProperties.$t('tableTabbar.shared_table'),
             path:"/shared/list"
         },
         {
             name:"timeline",
-            icon:getStaticImg('tabbar/user.png'),
-            iconActive:getStaticImg('tabbar/user-s.png'),
+            // icon:getStaticImg('tabbar/user.png'),
+            // iconActive:getStaticImg('tabbar/user-s.png'),
             text:globalProperties.$t('tableTabbar.timeline_table'),
             path:"/timeline/list"
         },
         {
             name:"mixed",
-            icon:getStaticImg('tabbar/home.png'),
-            iconActive:getStaticImg('tabbar/home-s.png'),
+            // icon:getStaticImg('tabbar/home.png'),
+            // iconActive:getStaticImg('tabbar/home-s.png'),
             text: globalProperties.$t('tableTabbar.mixed_table'),
             path:"/mixed/list"
         },
         {
             name:"balance",
-            icon:getStaticImg('tabbar/user.png'),
-            iconActive:getStaticImg('tabbar/user-s.png'),
+            // icon:getStaticImg('tabbar/user.png'),
+            // iconActive:getStaticImg('tabbar/user-s.png'),
             text:globalProperties.$t('tableTabbar.balance_sheet'),
             path:"/balance/list"
         }
@@ -56,7 +56,7 @@ function goPage(item){
                 @click="goPage(item)"
             >   
                 <div class="tabbar-item-con">
-                    <img class="icon" :src="$route.path==item.path?item.iconActive:item.icon" />
+                    <!-- <img class="icon" :src="$route.path==item.path?item.iconActive:item.icon" /> -->
                     <div class="text">{{item.text}}</div>
                 </div>
             </div>
@@ -101,7 +101,9 @@ function goPage(item){
                 height: 48px;
             }
             .text{
-                font-size: 20px;
+                // color: rgba(0, 82, 217, 1);
+                font-size: 32px;
+                font-weight: 400;
                 margin-top: 5px;
             }
         }
@@ -113,9 +115,10 @@ function goPage(item){
         .tabbar-item-con{
             background-color: #F2F3FF;
             border-radius: 112px;
-            // .text{
-            //     color: $theme-color;
-            // }
+            .text{
+                color: $theme-color;
+                font-weight: 500;
+            }
         }
     }
 }

src/views/sheetList/balanceChart.vue

@@ -1,16 +1,18 @@
 <script setup name="ChartETAChartDetail">
 import AddChartToMyETA from './components/AddChartToMyETA.vue';
 import { useRoute, useRouter } from "vue-router";
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, nextTick } from 'vue';
 import apiSheet from '@/api/sheet'
 import { useWindowSize } from '@vueuse/core'
+import {useChartRender} from '@/hooks/chart/render'
+const {chartRender}=useChartRender()
 const chartList = ref([]);
 const isShowAddToMyETADialog = ref(false);
 const route = useRoute()
 const { width } = useWindowSize()
 
 onMounted(() => {
-    // getChartList('init')
+    getChartList('init')
 })
 
 // 获取图表数据
@@ -20,16 +22,30 @@ async function getChartList(){
         })
     if(res.Ret!==200) return 
     chartList.value = res.Data.List||[]
+    nextTick(()=>{
+        chartRender({
+            data:{
+                ...res.Data.List[0],
+                ChartInfo:{
+                    ...res.Data.List[0].ChartInfo,
+                },
+            },
+            renderId:'chart-box',
+            changeLangIsCheck:false,
+            showChartTitle:false,
+            shouldUseSelfLimit:true,
+        })
+    })
 }
 </script>
 
 <template>
-    <div class="sheet-chart-page" v-if="chartList">
+    <div class="sheet-chart-page" v-if="chartList.length">
         <div class="sheet-name">表格名称sheet/版本</div>
         <!-- 图渲染区域 -->
        <div class="chart-box">
             <div class="chart-name">图表名称</div>
-            <div class="chart"></div>
+            <div class="chart" id="chart-box"></div>
             <div class="add-chart" @click="isShowAddToMyETADialog = true">加入我的图库</div>
        </div>
         <!-- 加入我的图库弹窗 -->
@@ -60,7 +76,6 @@ async function getChartList(){
         .chart {
             width: 100%;
             height: calc(100% - 110px);
-            background-color: pink;
         }
         .add-chart {
             margin-top: 20px;

src/views/sheetList/balanceDetail.vue

@@ -5,6 +5,7 @@ import apiSheet from '@/api/sheet'
 import { useWindowSize } from '@vueuse/core'
 import { showToast, showDialog  } from "vant";
 import {usePublicSettingStore} from '@/store/modules/publicSetting'
+import {getStaticImg} from '@/hooks/common.js'
 const publicSettingStore = usePublicSettingStore()
 // import { useDownLoadFile } from '@/hooks/useDownLoadFile'
 const { appContext : { config: { globalProperties } } } = getCurrentInstance();
@@ -17,15 +18,24 @@ const link = ref(publicSettingStore.publicSetting.ChartViewUrl);
 let showMoreAction = ref(false)
 let showPicker = ref(false)
 let showVersionPicker = ref(false)
+const chartList = ref([])
 const sheetActions = computed(() => {
-    return [
-        { label: globalProperties.$t('shared_table.refresh'), types:'flushed'},
-        { label: globalProperties.$t('shared_table.download'), types:'download'},
-        { label: globalProperties.$t('shared_table.delete'), types:'delete'},
-        { label: globalProperties.$t('shared_table.cancel'), types:'cancel'},
+    const list = [
+        { label: globalProperties.$t('shared_table.refresh'), types:'flushed', src: getStaticImg('table/flushed.png') },
+        { label: globalProperties.$t('shared_table.download'), types:'download', src: getStaticImg('table/download.png')},
+        { label: globalProperties.$t('shared_table.delete'), types:'delete', src: getStaticImg('table/delete.png')},
     ]
+    if (chartList.value && chartList.value.length > 0) list.unshift({ label: globalProperties.$t('shared_table.chart'), types:'chart', src: getStaticImg('table/chart.png')})
+    return list
 })
-
+const customFieldName = {
+    text: 'ExcelName',
+    value: 'ExcelInfoId',
+};
+const customVersionFieldName = {
+    text: 'VersionName',
+    value: 'UniqueCode',
+};
 const downExcelFileUrl = computed(() => {
     let url = `${
     import.meta.env.VITE_APP_API_URL
@@ -34,14 +44,13 @@ const downExcelFileUrl = computed(() => {
 })
 
 onMounted(() => {
-    getExcelDetail( 'load' )
     getVersionList()
     getChildTable()
 })
 //获取表格列表
 async function getExcelDetail( source = 'refresh', ExcelInfoId = '' ){
     const detailReq = {
-        ExcelInfoId: route.query.id,
+        ExcelInfoId: ExcelInfoId,
     }
     if(source==='delete') detailReq.ExcelInfoId = ExcelInfoId
     const res = await apiSheet.excelDetail(detailReq)
@@ -50,11 +59,21 @@ async function getExcelDetail( source = 'refresh', ExcelInfoId = '' ){
     queryData.value = res.Data
 }
 
+// 获取关联图库列表
+
+async function getChartList(ExcelInfoId){
+    const res = await apiSheet.getBalanceChartData({
+        ExcelInfoId
+    })
+    if(res.Ret!==200) return 
+    chartList.value = res.Data.List||[]
+}
+
 //更多操作
 function handleActionClick(item){
     switch(item.types){
         case 'flushed':
-            getExcelDetail( 'refresh' )
+            getChildTable()
             showMoreAction.value = false
             break;
         case 'download':
@@ -79,8 +98,8 @@ function handleActionClick(item){
                 })
             }).catch(()=>{})
             break;
-        case 'cancel':
-            showMoreAction.value = false
+        case 'chart':
+            goChart()
             break;
     }
 }
@@ -201,8 +220,8 @@ const columns = [
 ];
 const versionOpts = ref([])
 const childTableOpts = ref([])
-const fieldValue = ref('平衡表');
-const fieldValueVersion = ref('平衡表');
+const fieldValue = ref('表格名');
+const fieldValueVersion = ref('版本');
 
 // 平衡表获取版本列表
 function getVersionList(){
@@ -220,6 +239,8 @@ function getChildTable(){
         if(res.Ret === 200){
             const arr = res.Data.List || []
             childTableOpts.value = arr
+            getExcelDetail( 'load', arr[0] ? arr[0].ExcelInfoId : route.query.id)
+            getChartList(arr[0] ? arr[0].ExcelInfoId : route.query.id)
         }
     })
 }
@@ -227,13 +248,15 @@ function getChildTable(){
 // 平衡表选择器
 const onConfirm = ({ selectedOptions }) => {
     showPicker.value = false;
-    fieldValue.value = selectedOptions[0].text;
+    fieldValue.value = selectedOptions[0].ExcelName;
+    getExcelDetail( 'load', selectedOptions[0].ExcelInfoId)
 };
 
 // 版本选择器
 const onConfirmVersion = ({ selectedOptions }) => {
     showVersionPicker.value = false;
-    fieldValueVersion.value = selectedOptions[0].text;
+    fieldValueVersion.value = selectedOptions[0].VersionName;
+    getExcelDetail( 'load', selectedOptions[0].ExcelInfoId)
 };
 
 // 关联图表页
@@ -244,25 +267,44 @@ function goChart () {
 
 <template>
     <div class="page">
+        <div class="table-title">
+            <div class="table-name">{{ queryData.ExcelName }}</div>
+            <div class="top-box">
+                <div class="top-item">{{ $t('shared_table.author') }}：{{ queryData.SysUserRealName }}</div>
+                <div class="top-item">{{ $t('shared_table.recent_save_time') }}：{{ queryData.CreateTime?.slice(0,10) }} </div>
+                <!-- <div class="top-item"></div> -->
+            </div>
+        </div>
         <div class="filter-box">
             <div class="filter-item">
-                <div class="filter-label">平衡表</div>
-                <div class="filter-select" @click.stop="showPicker=true">{{ fieldValue }} <van-icon name="arrow-down"/></div>
+                <div class="filter-select" @click.stop="showPicker=true">
+                    <div class="filter-value">
+                        {{ fieldValue }} 
+                    </div> 
+                    <van-icon name="arrow"/>
+                </div>
             </div>
             <div class="filter-item">
-                <div class="filter-label version">版本</div>
-                <div class="filter-select"  @click.stop="showVersionPicker=true">{{ fieldValueVersion }} <van-icon name="arrow-down"/></div>
+                <div class="filter-select"  @click.stop="showVersionPicker=true">
+                    <div class="filter-value">
+                        {{ fieldValueVersion }} 
+                    </div> 
+                    <van-icon name="arrow"/>
+                </div>
             </div>
-            <div class="top-item"><van-icon name="chart-trending-o" size="22" @click.stop="goChart"v-if="queryData.Source === 5" /> <van-icon name="more-o" size="22" @click.stop="showMoreAction=true"/></div>
-        </div>
-        
-        <div class="top-box">
-            <div class="top-item">{{ $t('shared_table.author') }}：{{ queryData.SysUserRealName }}</div>
-            <div class="top-item">{{ $t('shared_table.recent_save_time') }}：{{ queryData.CreateTime?.slice(0,10) }}</div>
+            <!-- <div class="top-item"><van-icon name="chart-trending-o" size="22" @click.stop="goChart"v-if="queryData.Source === 5" /> <van-icon name="more-o" size="22" @click.stop="showMoreAction=true"/></div> -->
         </div>
         <div class="sheet-box" v-if="queryData.UniqueCode">
             <iframe :src="link + '/sheetshow?code=' + queryData.UniqueCode" frameborder="0" width="100%" height="100%"></iframe>
         </div>
+        <div class="bottom">
+            <div v-for="item in sheetActions" :key="item.types">
+                <div class="bottom-item" @click="handleActionClick(item)">
+                    <img :src="item.src" alt="">
+                    <div>{{item.label}}</div>
+                </div>
+            </div>
+        </div>
         <!-- 更多设置弹窗 -->
         <van-popup
             v-model:show="showMoreAction"
@@ -291,6 +333,7 @@ function goChart () {
                 :columns="childTableOpts"
                 @cancel="showPicker = false"
                 @confirm="onConfirm"
+                :columns-field-names="customFieldName"
             />
         </van-popup>
         <!-- 版本选择器 -->
@@ -299,6 +342,7 @@ function goChart () {
                 :columns="versionOpts"
                 @cancel="showVersionPicker = false"
                 @confirm="onConfirmVersion"
+                :columns-field-names="customVersionFieldName"
             />
         </van-popup>
     </div>
@@ -309,38 +353,45 @@ function goChart () {
     width: 100%;
     height: 100vh;
     padding: 24px;
+    .table-name {
+        max-height: 100px;
+        font-family: PingFang SC;
+        font-size: 36px;
+        font-weight: 400;
+        line-height: 52px;
+        // text-align: left;
+    }
     .filter-box {
         font-size: 28px;
         width: 100%;
-        height: 60px;
+        height: 84px;
         display: flex;
         justify-content: space-between;
+        align-items: center;
         .filter-item {
-            width: 42%;
-            height: 60px;
+            margin: 10px 0;
+            width: 49%;
+            height: 84px;
             display: flex;
             align-items: center;
+            border-radius: 12px;
             justify-content: space-between;
-            .filter-label {
-                width: 30%;
-                height: 60px;
-                line-height: 60px;
-                color: #303133;
-            }
-            .version {
-                width: 20%;
-            }
             .filter-select {
-                width: 70%;
-                height: 60px;
-                line-height: 60px;
+                width: 100%;
+                height: 72px;
+                border-radius: 12px;
+                font-size: 28px;
+                font-weight: 400;
+                padding: 0 16px;
                 display: flex;
-                justify-content: space-between;
                 align-items: center;
-                border-radius: 4px;
-                padding: 0 12px;
-                // border: #303133 1px solid;
-                border: 1px solid rgba(200, 205, 217, 1)
+                justify-content: space-between;
+                color: rgba(0, 82, 217, 1);
+                background: rgba(242, 243, 255, 1);
+                .filter-value {
+                    line-height: 72px;
+                    text-align: center;
+                }
             }
         }
         .top-item {
@@ -356,14 +407,19 @@ function goChart () {
         height: 60px;
         display: flex;
         justify-content: space-between;
+        font-family: PingFang SC;
+        font-size: 24px;
+        font-weight: 400;
+        line-height: 32px;
+        text-align: center;
+        color: rgba(102, 102, 102, 1);
         .top-item {
             line-height: 60px;
         }
     }
     .sheet-box{
         width: 100%;
-        height: calc(100% - 60px);
-        // background-color: pink;
+        height: calc(100% - 270px);
     }
     .sheet-more-action-wrap{
         .head-box{
@@ -387,18 +443,36 @@ function goChart () {
             }
         }
     }
+    .bottom {
+        display: flex;
+        justify-content: space-between;
+        .bottom-item {
+            color: rgba(51, 51, 51, 1);
+            font-size: 20px;
+            font-weight: 400;
+            line-height: 32px;
+            text-align: center;
+            img {
+                width: 40px;
+                height: 40px;
+            }
+        }
+    }
     @media screen and (min-width: 650px) {
         .filter-box {
+            width: 50%;
             font-size: 16px;
             height: 30px;
+            position: absolute;
+            left: 12px;
+            bottom: 18px;
             .filter-item {
+                width: 49%;
                 height: 30px;
-                .filter-label {
-                    height: 30px;
-                    line-height: 30px;
-                }
                 .filter-select {
                     height: 30px;
+                    border-radius: 6px;
+                    font-size: 14px;
                 }
             }
             .top-item {
@@ -407,4 +481,62 @@ function goChart () {
         }
     }
 }
+@media screen and (min-width: 650px) {
+    .page{
+        width: 100%;
+        height: 100vh;
+        padding: 12px;
+        .table-title {
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            .table-name {
+                width: 50%;
+                height: 50px;
+                font-family: PingFang SC;
+                font-size: 18px;
+                font-weight: 400;
+                line-height: 25px;
+                text-align: left;
+            }
+            .top-box {
+                width: 50%;
+                height: 50px;
+                display:block;
+                font-family: PingFang SC;
+                font-size: 12px;
+                font-weight: 400;
+                text-align: right;
+                color: rgba(102, 102, 102, 1);
+                .top-item {
+                    line-height: 25px;
+                }
+            }
+        }
+        .sheet-box{
+            margin-top: 10px;
+            width: 100%;
+            height: calc(100% - 110px);
+        }
+        .bottom {
+            width: 30%;
+            position: absolute;
+            right: 12px;
+            bottom: 12px;
+            display: flex;
+            justify-content: space-between;
+            .bottom-item {
+                color: rgba(51, 51, 51, 1);
+                font-size: 10px;
+                font-weight: 400;
+                line-height: 16px;
+                text-align: center;
+                img {
+                    width: 20px;
+                    height: 20px;
+                }
+            }
+        }
+    }
+}
 </style> 

src/views/sheetList/balanceList.vue

@@ -373,7 +373,7 @@ function goSheetSearch(){
     }
   @media screen and (min-width:$media-width){
     .select-wrap{
-        top:60px;
+        // top:60px;
         padding:30px;
         .search-box{
             .icon{
@@ -408,7 +408,7 @@ function goSheetSearch(){
                 }
                 .img{
                     width: 100%;
-                    height: auto;
+                    height: 120px;
                     display: block;
                     margin: 10px 0;
                 }

src/views/sheetList/mixedList.vue

@@ -373,7 +373,7 @@ function goSheetSearch(){
     }
   @media screen and (min-width:$media-width){
     .select-wrap{
-        top:60px;
+        // top:60px;
         padding:30px;
         .search-box{
             .icon{
@@ -408,7 +408,7 @@ function goSheetSearch(){
                 }
                 .img{
                     width: 100%;
-                    height: auto;
+                    height: 120px;
                     display: block;
                     margin: 10px 0;
                 }

src/views/sheetList/sharedDetail.vue

@@ -1,5 +1,6 @@
 <script setup name="sharedDetail">
 import {nextTick, onMounted, ref, computed, getCurrentInstance} from 'vue'
+import {getStaticImg} from '@/hooks/common.js'
 import { useRoute, useRouter } from "vue-router";
 import apiSheet from '@/api/sheet'
 import { useWindowSize } from '@vueuse/core'
@@ -18,10 +19,11 @@ let showMoreAction = ref(false)
 
 const sheetActions = computed(() => {
     return [
-        { label: globalProperties.$t('shared_table.refresh'), types:'flushed'},
-        { label: globalProperties.$t('shared_table.download'), types:'download'},
-        { label: globalProperties.$t('shared_table.delete'), types:'delete'},
-        { label: globalProperties.$t('shared_table.cancel'), types:'cancel'},
+        // { label: globalProperties.$t('shared_table.chart'), types:'cancel', src: getStaticImg('table/chart.png')},
+        { label: globalProperties.$t('shared_table.refresh'), types:'flushed', src: getStaticImg('table/flushed.png') },
+        { label: globalProperties.$t('shared_table.download'), types:'download', src: getStaticImg('table/download.png')},
+        { label: globalProperties.$t('shared_table.delete'), types:'delete', src: getStaticImg('table/delete.png')},
+        // { label: globalProperties.$t('shared_table.cancel'), types:'cancel', src: getStaticImg('table/chart.png')},
     ]
 })
 
@@ -192,14 +194,26 @@ function Base64() {
 
 <template>
     <div class="page">
-        <div class="top-box">
-            <div class="top-item">{{ $t('shared_table.author') }}：{{ queryData.SysUserRealName }}</div>
-            <div class="top-item">{{ $t('shared_table.recent_save_time') }}：{{ queryData.CreateTime?.slice(0,10) }}</div>
-            <div class="top-item"><van-icon name="more-o" @click.stop="showMoreAction=true"/></div>
+        <div class="table-title">
+            <div class="table-name">{{ queryData.ExcelName }}</div>
+            <div class="top-box">
+                <div class="top-item">{{ $t('shared_table.author') }}：{{ queryData.SysUserRealName }}</div>
+                <div class="top-item">{{ $t('shared_table.recent_save_time') }}：{{ queryData.CreateTime?.slice(0,10) }} </div>
+                <!-- <van-icon name="more-o" @click.stop="showMoreAction=true"/> -->
+                <!-- <div class="top-item"></div> -->
+            </div>
         </div>
         <div class="sheet-box" v-if="queryData.UniqueCode">
             <iframe :src="link + '/sheetshow?code=' + queryData.UniqueCode" frameborder="0" width="100%" height="100%"></iframe>
         </div>
+        <div class="bottom">
+            <div v-for="item in sheetActions" :key="item.types">
+                <div class="bottom-item" @click="handleActionClick(item)">
+                    <img :src="item.src" alt="">
+                    <div>{{item.label}}</div>
+                </div>
+            </div>
+        </div>
         <!-- 更多设置弹窗 -->
         <van-popup
             v-model:show="showMoreAction"
@@ -229,18 +243,32 @@ function Base64() {
     width: 100%;
     height: 100vh;
     padding: 24px;
+    .table-name {
+        max-height: 100px;
+        font-family: PingFang SC;
+        font-size: 36px;
+        font-weight: 400;
+        line-height: 52px;
+        // text-align: left;
+    }
     .top-box {
         width: 100%;
         height: 60px;
         display: flex;
         justify-content: space-between;
-        .item {
-
+        font-family: PingFang SC;
+        font-size: 24px;
+        font-weight: 400;
+        line-height: 32px;
+        text-align: center;
+        color: rgba(102, 102, 102, 1);
+        .top-item {
+            line-height: 60px;
         }
     }
     .sheet-box{
         width: 100%;
-        height: calc(100% - 60px);
+        height: calc(100% - 200px);
         // background-color: pink;
     }
     .sheet-more-action-wrap{
@@ -265,5 +293,75 @@ function Base64() {
             }
         }
     }
+    .bottom {
+        display: flex;
+        justify-content: space-around;
+        .bottom-item {
+            color: rgba(51, 51, 51, 1);
+            font-size: 20px;
+            font-weight: 400;
+            line-height: 32px;
+            text-align: center;
+            img {
+                width: 40px;
+                height: 40px;
+            }
+        }
+    }
+}
+@media screen and (min-width: 650px) {
+    .page{
+        width: 100%;
+        height: 100vh;
+        padding: 12px;
+        .table-title {
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            .table-name {
+                width: 50%;
+                height: 50px;
+                font-family: PingFang SC;
+                font-size: 18px;
+                font-weight: 400;
+                line-height: 25px;
+                text-align: left;
+            }
+            .top-box {
+                width: 50%;
+                height: 50px;
+                display:block;
+                font-family: PingFang SC;
+                font-size: 12px;
+                font-weight: 400;
+                text-align: right;
+                color: rgba(102, 102, 102, 1);
+                .top-item {
+                    line-height: 25px;
+                }
+            }
+        }
+        .sheet-box{
+            margin-top: 10px;
+            width: 100%;
+            height: calc(100% - 110px);
+        }
+        .bottom {
+            margin: 10px 0;
+            display: flex;
+            justify-content: space-between;
+            .bottom-item {
+                color: rgba(51, 51, 51, 1);
+                font-size: 10px;
+                font-weight: 400;
+                line-height: 16px;
+                text-align: center;
+                img {
+                    width: 20px;
+                    height: 20px;
+                }
+            }
+        }
+    }
 }
 </style> 

src/views/sheetList/sharedList.vue

@@ -373,7 +373,7 @@ function goSheetSearch(){
     }
   @media screen and (min-width:$media-width){
     .select-wrap{
-        top:60px;
+        // top:60px;
         padding:30px;
         .search-box{
             .icon{
@@ -408,7 +408,7 @@ function goSheetSearch(){
                 }
                 .img{
                     width: 100%;
-                    height: auto;
+                    height: 120px;
                     display: block;
                     margin: 10px 0;
                 }

src/views/sheetList/sharedSearch.vue

@@ -135,9 +135,9 @@ function goDetail(item){
     }
 }
 @media screen and (min-width:$media-width){
-    .search-box{
-        top: 60px;
-    }
+    // .search-box{
+    //     top: 60px;
+    // }
     .list-wrap{
         padding: 20px 30px;
         justify-content: center;

src/views/sheetList/timelineList.vue

@@ -373,7 +373,7 @@ function goSheetSearch(){
     }
   @media screen and (min-width:$media-width){
     .select-wrap{
-        top:60px;
+        // top:60px;
         padding:30px;
         .search-box{
             .icon{
@@ -408,7 +408,7 @@ function goSheetSearch(){
                 }
                 .img{
                     width: 100%;
-                    height: auto;
+                    height: 120px;
                     display: block;
                     margin: 10px 0;
                 }