technology_web1/src/views/help/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
        <cHead style="background-color: #2e3546; color: #f0f2f5"></cHead>
        <div class="w_1200">
          <el-row class="help">
            <el-col :span="6" class="left">
              <a-menu v-model:selectedKeys="selectedKeys" style="width: 256px" mode="inline" :items="menuList" @select="onOpenChange"></a-menu>
            </el-col>
            <el-col v-if="select === '1'" :span="18" class="right">
              <h2>关于我们</h2>
              <el-col :span="24" class="other">
                吉林省重点领域技术转移平台是全国最早开设的大型常设网上技术交易市场，为我国探索网上技术交易提供了大量的“浙江经验”。
                吉林省重点领域技术转移平台3.0版按照全要素聚集、全链条服务、全球化生态的规划思路升级建设，将打造统一的科技成果交易体系、服务体系、统计监测分析体系，构建线上线下、有形无形、国际国内一体化的技术市场体系，形成“招拍挂、股改投”联动的技术交易模式和辐射全国、链接全球的技术交易生态。
              </el-col>
            </el-col>
            <el-col v-else-if="select === '2'" :span="18" class="right">意见反馈</el-col>
            <el-col v-else-if="select === '3'" :span="18" class="right">
              <el-row :gutter="20">
                <el-col :span="12" class="left">
                  <el-image class="image" src="/src/assets/map.jpg" fit="fill" />
                </el-col>
                <el-col :span="12" class="right">
                  <el-col :span="24" class="other">
                    <el-icon color="#2374ff">
                      <Message />
                    </el-icon>
                    <span>联系我们</span> 吉林省科技开发交流中心
                  </el-col>
                  <el-col :span="24" class="other">
                    <el-icon color="#2374ff">
                      <Location />
                    </el-icon>
                    <span>联系地址</span>长春朝阳区前进大街1244号（吉林省科技厅科研园）
                  </el-col>
                  <el-col :span="24" class="other">
                    <el-icon color="#2374ff">
                      <Iphone />
                    </el-icon>
                    <span>联系电话</span> 0431-81165166
                  </el-col>
                </el-col>
              </el-row>
            </el-col>
            <el-col v-else-if="select === '4'" :span="18" class="right">法律条款</el-col>
          </el-row>
        </div>
        <cFoot style="background-color: #2e3546; color: #f0f2f5"></cFoot>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
// 基础
import type { Ref } from 'vue';
import { onMounted, ref, reactive } from 'vue';
import { useRoute } from 'vue-router';
import { ItemType } from 'ant-design-vue';
// 接口
// import { ToolsStore } from '@/stores/tool';
// import type { IQueryResult } from '@/util/types.util';
// const toolsAxios = ToolsStore();
const route = useRoute();
// 加载中
const loading: Ref<any> = ref(false);
const info: Ref<any> = ref({});
const selectedKeys: Ref<any> = ref(['1']);
const select: Ref<any> = ref('1');
const menuList: ItemType[] = reactive([
  {
    key: '1',
    label: '关于我们',
    title: '关于我们'
  },
  {
    key: '2',
    label: '意见反馈',
    title: '意见反馈'
  },
  {
    key: '3',
    label: '联系我们',
    title: '联系我们'
  },
  {
    key: '4',
    label: '法律条款',
    title: '法律条款'
  }
]);
// 请求
onMounted(async () => {
  loading.value = true;
  search();
  loading.value = false;
});
const search = async () => {
  if (route.query.type) {
    select.value = route.query.type;
    selectedKeys.value = [route.query.type];
  }
  //   let res: IQueryResult = await toolsAxios.dataCount();
  //   if (res.errcode == '0') {
  //     info.value = res.data;
  //   }
};
const onOpenChange = (item) => {
  select.value = item.key;
};
</script>
<style scoped lang="scss">
.main {
  .help {
    padding: 10px 0;
    min-height: 507px;

    .left {
      display: flex;
      align-items: normal;
    }

    .right {
      background: rgba(40, 77, 191, 0.03);
      padding: 20px;
      h2 {
        font-size: 32px;
        color: #284dbf;
      }

      .other {
        margin-bottom: 10px;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #7e8288;
        line-height: 25px;

        span {
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #383b40;
          line-height: 25px;
          margin: 0 5px;
        }
      }
    }
  }
}
</style>