technology_web2/src/views/activity/new.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
        <cHead :is_menu="false" :is_head="false">
          <template v-slot:info>
            <div class="w_1200">
              <el-col :span="24" class="one">
                <el-row :span="24" class="one_1">
                  <el-col :span="24" class="title">{{ info.title || '暂无标题' }}</el-col>
                </el-row>
                <el-row :span="24" class="one_4">
                  <el-col :span="24" class="other"><span>发布时间</span>{{ info.time || '暂无' }}</el-col>
                </el-row>
              </el-col>
              <a-divider />
              <el-col :span="24" class="two">
                <a-tabs>
                  <a-tab-pane tab="简介">
                    <el-col :span="24" class="two_1">{{ info.brief1 || '暂无' }}</el-col>
                    <el-col :span="24" class="two_1">{{ info.brief2 || '暂无' }}</el-col>
                    <el-col :span="24" class="two_1">{{ info.brief3 || '暂无' }}</el-col>
                    <el-col :span="24" class="two_1">{{ info.brief4 || '暂无' }}</el-col>
                    <el-col :span="24" class="two_1">{{ info.brief5 || '暂无' }}</el-col>
                    <el-col :span="24" class="two_1">{{ info.brief6 || '暂无' }}</el-col>
                  </a-tab-pane>
                </a-tabs>
              </el-col>
              <el-col :span="24" class="thr">
                <a-button type="primary"> 我要报名 </a-button>
              </el-col>
            </div>
          </template>
        </cHead>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
// 基础
import type { Ref } from 'vue';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
// 接口
// 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({
  title: '关于2023“浙江拍”科创平台专场活动调整的通知',
  time: '2023-11-29 15:40:43',
  brief1: '各竞价(拍卖) 相关单位:',
  brief2: '根据2023年中国浙江网上技术市场活动周开幕式暨首届浙江科技创新合作大会具体工作安排，对2023浙江拍科创平台专场活动进行调整，具体如下:',
  brief3: '1、活动时间: 与中国浙江网上技术市场活动周开幕式同期，具体时间另行通知',
  brief4: '2、活动地点:浙江创新馆(杭州未来科技城学术交流中心)中国浙江网上技术市场(https://51iishu.com) ',
  brief5: '联系人: 沈丽英',
  brief6: '联系电话: 13588873166'
});
// 请求
onMounted(async () => {
  loading.value = true;
  await searchOther();
  await search();
  loading.value = false;
});
const search = async () => {
  //   let id = route.query.id;
  //   if (id) {
  //     let res: IQueryResult = await userCheckAxios.fetch(id);
  //     if (res.errcode == '0') {
  //       let info: any = res.data as {};
  //       form.value = info;
  //       dataChange({ value: info.work_status, model: 'work_status' });
  //     }
  //   }
};
// 查询其他信息
const searchOther = async () => {
  //   let res: IQueryResult;
  //   // 性别
  //   res = await dictAxios.query({ type: 'common_gender' });
  //   if (res.errcode == '0') genderList.value = res.data;
};
</script>
<style scoped lang="scss">
.main {
  .one {
    margin: 20px 0 10px 0;
    border-top: 6px solid #2374ff;

    .one_1 {
      margin: 5px 0;

      .title {
        font-size: 18px;
        font-weight: 700;
        color: #383b40;
      }

      .file {
        display: flex;
        align-items: center;
        justify-content: end;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #2374ff;
        text-align: right;
      }
    }

    .one_4 {
      .other {
        color: #383b40;
        margin-top: 13px;
        font-size: 14px;
        line-height: 20px;

        span:first-child {
          color: #7e8288;
          margin: 0 15px 0 0;
        }
      }
    }
  }

  .two {
    background: #f9fafb;
    border-radius: 2px;
    padding: 30px;
    margin: 34px 0 20px;
    font-family: PingFangSC-Medium;
    font-size: 14px;
    color: #383b40;
    line-height: 14px;

    .two_1 {
      padding: 10px 0 0 0;
    }
  }

  .thr {
    margin: 0 0 10px 0;
  }
}
</style>