7.12

src/layout/index.vue

@@ -72,7 +72,10 @@
           >
             <router-link to="/indexLayout">首页</router-link>
           </el-menu-item> -->
-               <!-- <router-link  to="/matchLayout" v-show="yingyong"  class="yingyong">应用大赛</router-link> -->
+           <el-menu-item class="dasai" :class="currentMenu == 'matchLayout' ? 'itemOn' : ''">
+            <router-link to="/matchLayout" v-show="yingyong" class="yingyong"
+              >应用大赛</router-link>
+                </el-menu-item> 
           <el-menu-item    background-color="background-color: rgba($color: #0158a8, $alpha: 0.1);"
             v-if="loginStatus && userType != 1"
             :class="currentMenu == 'my-workbench' ? 'itemOn' : ''"
@@ -202,7 +205,7 @@ export default {
           this.flag=false;
              this.qylogos=true;
           this.xglogo=false;
-          this.yingyong=false;
+          this.yingyong=true;
         }  else{
           this.flag=true;
           this.xglogo=true;
@@ -435,13 +438,7 @@ export default {
    background: rgba($color: #0158a8, $alpha: 0.2);
    
 }
-.yingyong{
-  font-size: 14px;
-  color: #303133;
-   &:hover {
-      cursor: pointer;
-    }
-}
+
 .header {
   padding: 0 $pad;
   @include flex();
@@ -486,9 +483,6 @@ export default {
       border: none;
       background:none;
       color: #0470cc;
-      &:hover span{
-        color: #f66420;
-      }
       .itemOn {
         // color: $color_on !important;
         // border-bottom: 2px solid $color_on !important;
@@ -505,6 +499,9 @@ export default {
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
+      }
+       &:hover span {
+        color: #f66420;
       }
       .el-icon-arrow-down {
         font-size: 12px;
@@ -512,17 +509,10 @@ export default {
     }
   }
 }
-
 .app-main {
-  padding: 0;
-  width: 100%;
-  // height: calc(100vh - 85px);
-  // min-height: 580px;
+    width: 100%;
+    height: calc(100vh - 85px);
 }
-// .fixed-header + .app-main {
-//   // padding: 40px 0 0;
-// }
-
 .footer {
   @include w_h(100%, 35px);
   line-height: 35px;
@@ -576,4 +566,15 @@ export default {
     }
   }
 }
+.dasai{
+  
+  .yingyong{
+    font-size: 14px;
+    color: #303133;
+  }
+     &:hover .yingyong{
+        color: #f66420 !important;
+      }
+  
+}
 </style>

src/router/index.js

@@ -282,8 +282,16 @@ export const constantRoutes = [{
                     title: '大赛',
                     icon: ''
                 },
-            },
-             {
+                children: [{
+                    path: 'notice',
+                    name: 'Notice',
+                    component: () =>
+                        import ('@/views/megagame/notice'),
+                    meta: {
+                        title: '大赛',
+                        icon: ''
+                    }
+                }, {
                     path: 'timeline',
                     name: 'Timeline',
                     component: () =>
@@ -292,7 +300,8 @@ export const constantRoutes = [{
                         title: '报名成功',
                         icon: ''
                     }
-                },
+                }, ]
+            },
             {
                 path: 'topic',
                 name: 'Topic',
@@ -301,14 +310,13 @@ export const constantRoutes = [{
                 meta: {
                     title: '题目领取',
                     icon: ''
-                },
-             
+                }
             },
             {
                 path: 'detailsxq',
                 name: 'Detailsxq',
                 component: () =>
-                    import ('@/views/megagame/topic/detailsxq'),
+                    import ('@/views/megagame/topic/details/detailsxq'),
                 meta: {
                     title: '领题的详情页面',
                     icon: ''
@@ -318,7 +326,7 @@ export const constantRoutes = [{
                 path: 'detailafa',
                 name: 'Detailafa',
                 component: () =>
-                    import ('@/views/megagame/topic/detailsxq/detailAFA'),
+                    import ('@/views/megagame/topic/details/detailafa'),
                 meta: {
                     title: '领题的详情页面',
                     icon: ''
@@ -328,7 +336,7 @@ export const constantRoutes = [{
                 path: 'detailaw',
                 name: 'detailaw',
                 component: () =>
-                    import ('@/views/megagame/topic/detailaw'),
+                    import ('@/views/megagame/topic/details/detailaw'),
                 meta: {
                     title: '领题的详情页面',
                     icon: ''
@@ -338,7 +346,7 @@ export const constantRoutes = [{
                 path: 'detailmw',
                 name: 'detailmw',
                 component: () =>
-                    import ('@/views/megagame/topic/detailmw'),
+                    import ('@/views/megagame/topic/details/detailmw'),
                 meta: {
                     title: '领题的详情页面',
                     icon: ''
@@ -348,7 +356,7 @@ export const constantRoutes = [{
                 path: 'detailbyy',
                 name: 'detailbyy',
                 component: () =>
-                    import ('@/views/megagame/topic/detailbyy'),
+                    import ('@/views/megagame/topic/details/detailbyy'),
                 meta: {
                     title: '领题的详情页面',
                     icon: ''
@@ -358,7 +366,7 @@ export const constantRoutes = [{
                 path: 'detailbzs1',
                 name: 'detailbzs1',
                 component: () =>
-                    import ('@/views/megagame/topic/detailbzs1'),
+                    import ('@/views/megagame/topic/details/detailbzs1'),
                 meta: {
                     title: '领题的详情页面',
                     icon: ''
@@ -368,7 +376,7 @@ export const constantRoutes = [{
                 path: 'detailbzs2',
                 name: 'detailbzs2',
                 component: () =>
-                    import ('@/views/megagame/topic/detailbzs2'),
+                    import ('@/views/megagame/topic/details/detailbzs2'),
                 meta: {
                     title: '领题的详情页面',
                     icon: ''
@@ -378,7 +386,7 @@ export const constantRoutes = [{
                 path: 'detailbzs3',
                 name: 'detailbzs3',
                 component: () =>
-                    import ('@/views/megagame/topic/detailbzs3'),
+                    import ('@/views/megagame/topic/details/detailbzs3'),
                 meta: {
                     title: '领题的详情页面',
                     icon: ''
@@ -388,7 +396,7 @@ export const constantRoutes = [{
                 path: 'detailbzs4',
                 name: 'detailbzs4',
                 component: () =>
-                    import ('@/views/megagame/topic/detailbzs4'),
+                    import ('@/views/megagame/topic/details/detailbzs4'),
                 meta: {
                     title: '领题的详情页面',
                     icon: ''
@@ -505,4 +513,4 @@ export function resetRouter() {
     router.matcher = newRouter.matcher
 }
 
-export default router // 导出router
+export default router // 导出routernp

src/views/megagame/matchLayout.vue

@@ -1,240 +1,132 @@
-/*data*/
+/*matchLayout*/
 <template>
-<div>
-  <div class="megagame">
-    <div class="img">
-      <img src="../../assets/match/beijin.png"/></div>
-      <div class="da_content">
-        <p class="title"><img src="../../assets/match/dasai.png"/></p>
-        <div class="content">
-          <p class="content_title title1 ">关于邀请参加第一届{{datacontent.title}}全国大学生</p>
-          <p class="content_title  title1"> 仿真软件应用设计大赛的通知</p>
-          <p class=" title1 fontsize">各有关院校：</p>
-          <p class=" title1 fontsize"> 为贯彻国家发展自主可控工业软件产业的战略部署，提高仿真设计的软件开发、应用能力，深化产教融合、校企合作，创新高校人才培养机制，为国产仿真软件应用提供丰富的人才储备。中国国际智能产业博览会联合重庆市政府于2021年6月启动“第一届‘智博杯’全国仿真软件应用设计大赛”。现将大赛有关事项通知如下：</p>
-      
-       <h4 class="title2">一、大赛宗旨</h4>
-       <p class=" title1 fontsize">{{datacontent.content}}</p>
-       
-         <h4  class="title2">二、组织架构</h4>
-         <p class=" title1 fontsize">主办单位：智博会组委 </p>
-         <p class=" title1 fontsize">承办单位：重庆犀工科技、重庆赛迪工业与信息化研究院 </p>
-         <p class=" title1 fontsize">协办单位：西安前沿动力、紫光南方云</p>
+  <div class="matchLayout">
+    <div class="footer-img">
+      <img src="@/assets/match/beijin.png" />
+    </div>
+    <div class="content">
+      <div class="title"><img src="@/assets/match/dasai.png" /></div>
+      <div class="container">
+        <div class="container-bg">
+          <img src="@/assets/match/content.png" />
+        </div>
+        <div class="container-box">
+          <div class="slot-container">
+            <transition name="fade-transform" mode="out-in">
+              <router-view />
+            </transition>
           </div>
-        <div class="injo" @click="canjia()" ><img src="../../assets/match/cj.png"/></div>
-          </div>
-  
+        </div>
       </div>
-    
-</div>
+    </div>
+  </div>
 </template>
+
 <script>
-import { request, getImage } from '@/utils/request'
-import { parseTime } from '@/utils/index'
-import store from '@/store' // vue状态管理
-import { Message, MessageBox } from 'element-ui' // 引入Message、MessageBox
-import NProgress from 'nprogress' // 进度条
-import 'nprogress/nprogress.css' // 进度条样式
 export default {
-  name: 'megagame',
+  name: 'matchLayout',
   components: {},
   data() {
     return {
-      userType: this.$store.getters.userType || 0, // 用户类型（0-个人 1-企业 2-子账户）
-      realStatus: this.$store.getters.realStatus || 0, // 实名状态（0-未认证 1-认证中 2-认证通过 3-认证失败）
-     userRole:sessionStorage.getItem("userRole"),// 用户角色(0-游客 1-设计师 2-owner 3-评委)
-      showView: true,
-     megagameId:'',
-     uid:'',
-     datacontent:{
-       title:'“智博杯”',
-       content:'旨在依托国内龙头企业提供的应用场景、选题，使用国内自主可控的CAD/CAE云软件，在自主可控的仿真云+区块链平台上，邀请国内外高校教师及学生，进行工业仿真软件应用设计，设计成果由网信备案的区块链工业版权平台保护、管理，从而推动自主知识产权的工业仿真软件普及，以及实现对工业仿真软件专业人才的培养。'
-     }
+      currentPage: 'notice',
     }
   },
   created() {
-
-  },
-  mounted(){
-  this.megeme();
-  },
-  methods: {
-    
-  //获取当前大赛信息
-megeme(){
-const params = {
-            transCode: 'D00027',
-          }
-          request(params)
-            .then((res) => {
-              this.megagameId=res.megagameId;
-              // this.uid=res.uid;
-       
-            })
-            .catch((err) => {})
-},
-
-canjia(){
-  let loginStatus= store.getters.loginStatus;
-
-      if (loginStatus ) {
-      // 判断子账户是否实名
-        if(this.userType==2||this.realStatus==2){
-              this.noentry();
-        }else{
-            this.noentry();
-            Message("请先去实名制");
-         //   this.$router.replace(`/userLayout/real`)
-        }
-            NProgress.done() // 关闭进度
-        }else{
-            MessageBox.confirm('你还未登录，请登录后再操作, 是否登录?', '提示', {
-                    confirmButtonText: '登录',
-                    cancelButtonText: '取消',
-                    center: true,
-                    closeOnClickModal: false,
-                    type: 'warning'
-                })
-                .then(() => {
-                   this.$router.replace(`/indexLayout/home?type=reLogin`)
-                    NProgress.done() // 关闭进度条
-                })
-                .catch(() => {
-                    NProgress.done() // 关闭进度条
-                    Message.info('已取消')
-                })
-        }
-},
-//判断是否参赛
-noentry(){
-   
-const params = {
-            transCode: 'D00023',
-            megagameId:this.megagameId,
-            uid:store.getters.userId,
-          }
-          request(params)
-            .then((res) => {
-            console.log(res);
-         if(res.isJoin==1){
-             this.$router.replace({
-                path: '/timeline',
-                query:{megagameId:this.megagameId,uid:this.uid},
-              })
-
-         }else{
-           this.zhanghao();
-         }
-             
-       
-            })
-            .catch((err) => {})
-},
-// 判断是子账号还是非子账号、、已实名验证或子账号的参赛接口
-
-
-
-// 是否参赛
-zhanghao(){
-const params = {
-            transCode: 'D00028',
-            megagameId:this.megagameId,
-            uid:store.getters.userId,
-          }
-          request(params)
-            .then((res) => {
-            })
-            .catch((err) => {})
-}
+    const path = this.$route.path
+    let pathArr = path.split('/')
+    if (pathArr.length == 3 && pathArr[2]) {
+      this.currentPage = pathArr[2]
+    } else {
+      this.currentPage = 'notice'
+    }
+    if (path === '/' || path === '/matchLayout' || path === '/matchLayout/') {
+      this.$router.replace({ path: '/matchLayout/' + this.currentPage })
+    }
   },
+  mounted() {},
+  methods: {},
 }
 </script>
 
 <style lang="scss" scoped>
 @import '@/styles/variables.scss';
 @import '@/styles/mixin.scss';
-.megagame {
-  font-family: 'STHeitiSC-Light';
-  // @include w_h(100%, 100%);
-  @include w_h(100%);
-  // padding: 30px 60px;
-  background: #000;
-  overflow: hidden;
-  flex:1;
+.matchLayout {
+  @include w_h(100%, 100%);
+  @include flex(center);
   position: relative;
-  .img{
-    // height: scal(100vh);
+  background: $color_0;
+  .footer-img {
+    @include w_h(100%);
+    @include position(fixed, auto, -3px, 0, 0);
+    background: $color_0;
+    img {
       @include w_h(100%);
-      position: absolute;
-      z-index: 0;
-      bottom: -3px;
-      img{
-     @include w_h(100%);
-      }
-  }
-  .da_content{
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 5% 0;
-  position: relative;
-  .title{
-    text-align: center;
+    }
   }
-
- .content{
-      width: 100%;
-      height:598px;
-       background: url('../../assets/match/content.png') no-repeat;
-        background-size: cover;
-      background-position: center 0;
-      padding: 67px;
-      .title1{
-    
-      color: #fff;
-      line-height: 1.5;
+  .content {
+    @include w_h(95%, 90%);
+    min-width: 900px;
+    min-height: 560px;
+    .title {
+      @include w_h(100%, 60px);
+      text-align: center;
+      img {
+        height: 100%;
       }
-    .content_title{
-       text-align: center;
-      font-size: 18px;
-    }
-    .fontsize{
-      font-size: 16px;
     }
-    .title2{
-     color: #FDE800;
-     font-size: 16px;
-     margin-top: 30px;
-     padding: 10px 0;
-    }
-    
- }
- .injo{
-   position: absolute;
-      bottom: 100px;
-				left: 50%;
-				transform: translateX(-50%);
 
- }
+    .container {
+      @include w_h(100%, calc(100% - 60px));
+      position: relative;
+      overflow: hidden;
+      &-bg {
+        @include position(absolute, 0, 0, 0, 0);
+        img {
+          @include w_h(100%, 100%);
+        }
+      }
+      &-box {
+        @include w_h(100%, 100%);
+        position: relative;
+        padding: 45px 3.8% 70px;
+        overflow: hidden;
+
+        .slot-container {
+          @include w_h(100%, 100%);
+          padding: 20px 30px;
+          overflow: auto;
+
+          /*谷歌、safari、qq浏览器、360浏览器滚动条样式*/
+          /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
+          &::-webkit-scrollbar {
+            width: 8px;
+            height: 3px;
+            background: transparent;
+          }
+          /*定义滚动条轨道 内阴影+圆角*/
+          &::-webkit-scrollbar-track {
+            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+            border-radius: 10px;
+            background: transparent;
+          }
+
+          /*定义滑块 内阴影+圆角*/
+          &::-webkit-scrollbar-thumb {
+            border-radius: 10px;
+            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+            background: #0196fb;
+          }
+
+          /*滑块效果*/
+          &::-webkit-scrollbar-thumb:hover {
+            border-radius: 5px;
+            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+            background: rgba(0, 139, 250, 0.9);
+          }
+        }
+      }
+    }
   }
-  // .dasai{
-  //     height: 300px;
-  //     width: 100%;
-  // }
-  // .da_left{
-  // color: #ffffff;
-  // }
-  // .latest {
-  //   h3 {
-  //     color: #ee6a74;
-  //   }
-  // }
-  // .popularity {
-  //   margin-top: 20px;
-  //   h3 {
-  //     color: #db7116;
-  //   }
-  // }
 }
-.footer{
-        background: #2b2828;
-  }
 </style>

src/views/megagame/notice/index.vue

@@ -0,0 +1,201 @@
+/*notice*/
+<template>
+  <div class="notice">
+    <div class="title">
+      <h3>关于邀请参加第一届“智博杯”全国大学生仿真软件应用设计大赛的通知</h3>
+    </div>
+
+    <p>各有关院校：</p>
+    <p>
+      为贯彻国家发展自主可控工业软件产业的战略部署，提高仿真设计的软件开发、应用能力，深化产教融合、校企合作，创新高校人才培养机制，为国产仿真软件应用提供丰富的人才储备。中国国际智能产业博览会联合重庆市政府于2021年6月启动“第一届‘智博杯’全国仿真软件应用设计大赛”。现将大赛有关事项通知如下：
+    </p>
+
+    <h4>一、大赛宗旨</h4>
+    <p>
+      旨在依托国内龙头企业提供的应用场景、选题，使用国内自主可控的CAD/CAE云软件，在自主可控的仿真云+区块链平台上，邀请国内外高校教师及学生，进行工业仿真软件应用设计，设计成果由网信备案的区块链工业版权平台保护、管理，从而推动自主知识产权的工业仿真软件普及，以及实现对工业仿真软件专业人才的培养。
+    </p>
+
+    <h4>二、组织架构</h4>
+    <p>主办单位：智博会组委</p>
+    <p>承办单位：重庆犀工科技、重庆赛迪工业与信息化研究院</p>
+    <p>协办单位：西安前沿动力、紫光南方云</p>
+
+    <h4>三、参赛对象</h4>
+    <p>
+      国内外所有全日制在籍的高职学生、本科学生、一带一路国际留学生、研究生及教师。
+    </p>
+
+    <h4>四、大赛报名</h4>
+    <p>(一)报名要求</p>
+    <p>1.参赛学生以1人为竞赛小组，由学校教师代表统一报名；</p>
+    <p>2.不同学校的学生不可联合组队；</p>
+    <p>3.每组指导教师不超过2名，同一名指导教师可指导多组；</p>
+    <p>4.各院校不限制报名人数。</p>
+    <p>(二)时间及方式</p>
+    <p>报名时间：2021年6月1日2021年6月30日；</p>
+    <p>
+      报名方式：由学校教师代表统一登陆大赛官网(www.xigital.com.cn)进行报名。
+    </p>
+    <p>(三)参赛费用</p>
+    <p>组委会为参赛学生提供在线课程、赛前练习、证书及邮寄等相关服务。</p>
+
+    <h4>五、赛事安排</h4>
+    <p>(一)赛制安排</p>
+    <p>1.练习阶段</p>
+    <p>7/1前，参赛者在大赛平台上练习。</p>
+    <p>2.比赛阶段</p>
+    <p>7/1大赛平台开题，7/31结束设计，8月下旬智博会期间结束评选。</p>
+    <p>(二)评选办法及奖项设置</p>
+    <p>(1)参赛选手奖</p>
+    <p>分别设置特、一、二、三等奖及优秀奖。</p>
+    <p>(2)指导教师奖</p>
+    <p>获奖选手指导教师可获得“优秀指导教师”称号。</p>
+    <p>(3)优秀组织协同奖</p>
+    <p>
+      参赛组织工作成绩突出、经大赛组委会审批符合相关条件的单位，获“优秀组织协同单位”称号。
+    </p>
+
+    <h4>六、其他事项</h4>
+    <p>(一)大赛详细内容及后续安排，请参赛师生及时登陆官网关注。</p>
+    <p>(二)大赛联系人及联系方式：谭先生 13350373651</p>
+
+    <h4></h4>
+    <p class="right">智博会组委会</p>
+    <p class="right">2021年5月</p>
+
+    <div class="injo" @click="canjia()">
+      <img src="@/assets/match/cj.png" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { request } from '@/utils/request'
+
+export default {
+  name: 'notice',
+  components: {},
+  data() {
+    return {
+      userType: this.$store.getters.userType || 0, // 用户类型（0-个人 1-企业 2-子账户）
+      realStatus: this.$store.getters.realStatus || 0, // 实名状态（0-未认证 1-认证中 2-认证通过 3-认证失败）
+      userRole: sessionStorage.getItem('userRole'), // 用户角色(0-游客 1-设计师 2-owner 3-评委)
+      showView: true,
+      megagameId: '',
+      uid: '',
+    }
+  },
+  created() {
+    this.megeme()
+  },
+  mounted() {},
+  methods: {
+    //获取当前大赛信息
+    megeme() {
+      const params = {
+        transCode: 'D00027',
+      }
+      request(params)
+        .then((res) => {
+          this.megagameId = res.megagameId
+          // this.uid=res.uid;
+        })
+        .catch((err) => {})
+    },
+
+    canjia() {
+      let loginStatus = this.$store.getters.loginStatus
+      if (loginStatus) {
+        // 判断子账户是否实名
+        if (this.userType == 2 || this.realStatus == 2) {
+          this.noentry()
+        } else {
+          this.noentry()
+          this.$message.error('请先去实名制')
+          // this.$router.replace(`/userLayout/real`)
+        }
+      } else {
+        this.$message.error('请先登录')
+      }
+    },
+    //判断是否参赛
+    noentry() {
+      const params = {
+        transCode: 'D00023',
+        megagameId: this.megagameId,
+        uid: this.$store.getters.userId,
+      }
+      request(params)
+        .then((res) => {
+          if (res.isJoin == 1) {
+            this.$router.replace({
+              path: '/matchLayout/timeline',
+              query: { megagameId: this.megagameId, uid: this.uid },
+            })
+          } else {
+            this.zhanghao()
+          }
+        })
+        .catch((err) => {})
+    },
+    // 判断是子账号还是非子账号、、已实名验证或子账号的参赛接口
+
+    // 是否参赛
+    zhanghao() {
+      const params = {
+        transCode: 'D00028',
+        megagameId: this.megagameId,
+        uid: this.$store.getters.userId,
+      }
+      request(params)
+        .then((res) => {})
+        .catch((err) => {})
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/variables.scss';
+@import '@/styles/mixin.scss';
+.notice {
+  @include w_h();
+  color: $color_f;
+  line-height: 1.5;
+  .title {
+    text-align: center;
+    h3 {
+      display: inline-block;
+      @include w_h(350px);
+      font-size: 18px;
+      font-weight: 400;
+    }
+  }
+  p {
+    font-size: 16px;
+    &.right {
+      padding: 0 60px;
+      text-align: right;
+    }
+  }
+  h4 {
+    margin-top: 15px;
+    padding: 10px 0;
+    font-size: 16px;
+    color: #fde800;
+    font-weight: 400;
+  }
+  .injo {
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    transition: all 0.3s;
+    &:hover {
+      cursor: pointer;
+      opacity: 0.9;
+      filter: hue-rotate(-8deg);
+    }
+  }
+}
+</style>

src/views/megagame/timeline/index.vue

@@ -1,289 +1,321 @@
 /*timeline*/
 <template>
-<div>
-  <div class="megagame">
-    <div class="img">
-      <img src="../../../assets/match/beijin.png"/></div>
-      <div class="da_content">
-        <p class="title"><img src="../../../assets/match/dasai.png"/></p>
-        <div class="content">
-            <p class="bm_title" @click="clickliti('matchLayout')">大赛详情</p>
-            <div class="bm_succeed ">
-              <div class="bmimg"><img src="../../../assets/match/bm1.png"></div>
-              <p class="wenzi">您已报名成功！</p>
-           
-               <p>请于{{timequjian}}(零点)</p>
-              <p> 点击下图 步骤“{{status}}”领取</p> 
-              
-            </div>
-            <div class="step">
-              <el-progress :percentage="num" ></el-progress>
+  <div class="timeline">
+    <p class="bm_title" @click="clickliti('matchLayout')">大赛详情</p>
+    <div class="bm_succeed">
+      <img src="@/assets/match/bm1.png" />
+      <p class="wenzi">您已报名成功！</p>
 
-              <div class="line div">
-                <ul class="ul">
-                  <li>
-                    <div class="i">
-                    <img  :src="imgs.ywc1"/></div>
-                    <p>报名</p>
-                      <p>{{appleStime}}</p>
-                  </li>
-                   <li>
-                       <div class="i" v-if="newtime>=answerS" @click="ywc('topic')"> <img src="../../../assets/match/ywc2.png"/></div>
-                        <div class="i" v-else-if="time<= newtime && newtime <answerS" @click="clickliti('topic')" > <img src="../../../assets/match/z2.png"/></div>
-                       <div class="i" v-else @click="weikaifang('topic')" > <img src="../../../assets/match/i2.png"/></div>
-                    <p>预演/领题</p>
-                      <p>{{appleStime}}</p>
-                  </li>
-                   <li>
-                        <div class="i" v-if="newtime>=answerEtime1" @click="ywc('dati')"> <img src="../../../assets/match/ywc3.png"/></div>
-                        <div class="i" v-else-if="answerS<=newtime&& newtime <answerEtime1"  @click="clickliti('dati')"> <img src="../../../assets/match/z3.png"/></div>
-                       <div class="i" v-else @click="weikaifang('dati')" > <img src="../../../assets/match/i3.png"/></div>
-                    <p>答题/领题</p>
-                      <p>{{answerStime}}</p>
-                  </li>
-                   <li>
-                        <div class="i" v-if="newtime>=reportE"  @click="ywc('baogaos')"> <img src="../../../assets/match/ywc4.png"/></div>
-                        <div class="i" v-else-if="answerS<=newtime && newtime <reportE"  @click="clickliti('baogaos')" > <img src="../../../assets/match/z4.png"/></div>
-                       <div class="i" v-else   @click="weikaifang('baogaos')"> <img src="../../../assets/match/i4.png"/></div>
-                    <p>报告上传</p>
-                      <p>{{answerStime}}</p>
-                  </li>
-                   <li>
-                        <div class="i" v-if="newtime>=time5" @click="ywc('pingfen')"> <img src="../../../assets/match/ywc5.png"/></div>
-                        <div class="i" v-else-if="reviewS<=newtime && newtime <reviewE"  @click="clickliti('pingfen')"> <img src="../../../assets/match/z5.png"/></div>
-                       <div class="i" v-else @click="weikaifang('pingfen')" > <img src="../../../assets/match/i5.png"/></div>
-                    <p>评委评分</p>
-                      <p>{{reviewStime}}</p>
-                  </li>
-                   <li>
-                        <div class="i" v-if="reviewE<=newtime"  @click="clickliti('result')"> <img src="../../../assets/match/z6.png"/></div>
-                          <div class="i" v-if="reviewE<=newtime"  @click="clickliti('result')"> <img src="../../../assets/match/ywc6.png"/></div>
-                       <div class="i" v-else   @click="weikaifang('result')"> <img src="../../../assets/match/i6.png"/></div>
-                    <p>查看结果</p>
-                    <p>{{reviewEtime}}</p>
-                  </li>
-                </ul>
-              </div>
-            </div>
-        
+      <p>请于{{ timequjian }}(零点)</p>
+      <p>点击下图 步骤“{{ status }}”领取</p>
+    </div>
+    <div class="step">
+      <el-progress :percentage="num"></el-progress>
+
+      <ul>
+        <li>
+          <div class="i">
+            <img src="@/assets/match/ywc1.png" />
+          </div>
+          <p>报名</p>
+          <span>{{ appleStime }}</span>
+        </li>
+
+        <li :class="[time <= newtime && newtime < answerS ? 'on' : '']">
+          <div class="i" v-if="newtime >= answerS" @click="ywc('topic')">
+            <img src="@/assets/match/ywc2.png" />
+          </div>
+          <div
+            class="i"
+            v-else-if="time <= newtime && newtime < answerS"
+            @click="clickliti('topic')"
+          >
+            <img src="@/assets/match/z2.png" />
+          </div>
+          <div class="i" v-else @click="weikaifang('topic')">
+            <img src="@/assets/match/i2.png" />
+          </div>
+          <p>预演/领题</p>
+          <span>{{ appleStime }}</span>
+        </li>
+        <li :class="[answerS <= newtime && newtime < answerEtime1 ? 'on' : '']">
+          <div class="i" v-if="newtime >= answerEtime1" @click="ywc('dati')">
+            <img src="@/assets/match/ywc3.png" />
+          </div>
+          <div
+            class="i"
+            v-else-if="answerS <= newtime && newtime < answerEtime1"
+            @click="clickliti('dati')"
+          >
+            <img src="@/assets/match/z3.png" />
+          </div>
+          <div class="i" v-else @click="weikaifang('dati')">
+            <img src="@/assets/match/i3.png" />
+          </div>
+          <p>答题/领题</p>
+          <span>{{ answerStime }}</span>
+        </li>
+        <li :class="[answerS <= newtime && newtime < reportE ? 'on' : '']">
+          <div class="i" v-if="newtime >= reportE" @click="ywc('baogaos')">
+            <img src="@/assets/match/ywc4.png" />
           </div>
+          <div
+            class="i"
+            v-else-if="answerS <= newtime && newtime < reportE"
+            @click="clickliti('baogaos')"
+          >
+            <img src="@/assets/match/z4.png" />
           </div>
-  
-      </div>
-    
-</div>
+          <div class="i" v-else @click="weikaifang('baogaos')">
+            <img src="@/assets/match/i4.png" />
+          </div>
+          <p>报告上传</p>
+          <span>{{ answerStime }}</span>
+        </li>
+        <li :class="[reviewS <= newtime && newtime < reviewE ? 'on' : '']">
+          <div class="i" v-if="newtime >= reviewE" @click="ywc('pingfen')">
+            <img src="@/assets/match/ywc5.png" />
+          </div>
+          <div
+            class="i"
+            v-else-if="reviewS <= newtime && newtime < reviewE"
+            @click="clickliti('pingfen')"
+          >
+            <img src="@/assets/match/z5.png" />
+          </div>
+          <div class="i" v-else @click="weikaifang('pingfen')">
+            <img src="@/assets/match/i5.png" />
+          </div>
+          <p>评委评分</p>
+          <span>{{ reviewStime }}</span>
+        </li>
+        <li :class="[reviewE <= newtime ? 'on' : '']">
+          <div class="i" v-if="reviewE <= newtime" @click="clickliti('result')">
+            <img src="@/assets/match/z6.png" />
+          </div>
+          <div class="i" v-if="reviewE <= newtime" @click="clickliti('result')">
+            <img src="@/assets/match/ywc6.png" />
+          </div>
+          <div class="i" v-else @click="weikaifang('result')">
+            <img src="@/assets/match/i6.png" />
+          </div>
+          <p>查看结果</p>
+          <span>{{ reviewEtime }}</span>
+        </li>
+      </ul>
+    </div>
+  </div>
 </template>
 
 <script>
-import { request, getImage } from '@/utils/request'
-import { Message, MessageBox } from 'element-ui' // 引入Message、MessageBox
-import ywc1 from '../../../assets/match/ywc1.png'
-import ywc2 from '../../../assets/match/ywc2.png'
-import z2 from '../../../assets/match/z2.png'
-import i2 from '../../../assets/match/i2.png'
-import ywc3 from '../../../assets/match/ywc3.png'
-import z3 from '../../../assets/match/z3.png'
-import i3 from '../../../assets/match/i3.png'
-import ywc4 from '../../../assets/match/ywc4.png'
-import z4 from '../../../assets/match/z4.png'
-import i4 from '../../../assets/match/i4.png'
-import ywc5 from '../../../assets/match/ywc5.png'
-import z5 from '../../../assets/match/z5.png'
-import i5 from '../../../assets/match/i5.png'
-import ywc6 from '../../../assets/match/ywc6.png'
-import z6 from '../../../assets/match/z6.png'
-import i6 from '../../../assets/match/i6.png'
+import { request } from '@/utils/request'
+import { Message } from 'element-ui' // 引入Message、MessageBox
+import ywc1 from '@/assets/match/ywc1.png'
+import ywc2 from '@/assets/match/ywc2.png'
+import ywc3 from '@/assets/match/ywc3.png'
+import ywc4 from '@/assets/match/ywc4.png'
+import ywc5 from '@/assets/match/ywc5.png'
+import ywc6 from '@/assets/match/ywc6.png'
+
+import z2 from '@/assets/match/z2.png'
+import z3 from '@/assets/match/z3.png'
+import z4 from '@/assets/match/z4.png'
+import z5 from '@/assets/match/z5.png'
+import z6 from '@/assets/match/z6.png'
+
+import i2 from '@/assets/match/i2.png'
+import i3 from '@/assets/match/i3.png'
+import i4 from '@/assets/match/i4.png'
+import i5 from '@/assets/match/i5.png'
+import i6 from '@/assets/match/i6.png'
 export default {
   name: 'megagame',
   components: {},
   data() {
     return {
-   imgs:{
-       ywc1,
-       ywc2,
-       z2,
-       i2,
-       ywc3,
-       z3,
-       i3,
-      ywc4,
-       z4,
-       i4,
-      ywc5,
-       z5,
-       i5,
-       ywc6,
-       z6,
-       i6,
+      imgs: {
+        ywc1,
+        ywc2,
+        ywc3,
+        ywc4,
+        ywc5,
+        ywc6,
+        z2,
+        z3,
+        z4,
+        z5,
+        z6,
+        i2,
+        i3,
+        i4,
+        i5,
+        i6,
+      },
+      appleEtime1: Number,
+      answerStime1: Number,
+      answerEtime1: Number,
+      reviewStime1: Number,
+      reportEtime1: Number,
+      reviewStime1: Number,
+      reviewEtime1: Number,
 
-   },
-      appleEtime1:Number,
-      answerStime1:Number,
-      answerEtime1:Number,
-      reviewStime1:Number,
-      reportEtime1:Number,
-      reviewStime1:Number,
-      reviewEtime1:Number,
-
-      newtime:Number,
-      time:Number,
-      answerS:Number,
-      reportE:Number,
-      reviewS:Number,
-      reviewE:Number,
-      answerEtime1:Number,
-      timequjian:'',
-      status:"1",
-      appleStime:'',
-      appleEtime:'',
-      answerStime:'',
-      reportEtime:'',
-      reviewStime:'',
-      reviewEtime:'',
-      currentPage:'',
-      answerEtime:'',
-      megagameId:'',
-      uid:"",
-      img:'',
-      activeSteps:2,
-      num:0,
+      newtime: Number,
+      time: Number,
+      answerS: Number,
+      reportE: Number,
+      reviewS: Number,
+      reviewE: Number,
+      answerEtime1: Number,
+      timequjian: '',
+      status: '1',
+      appleStime: '',
+      appleEtime: '',
+      answerStime: '',
+      reportEtime: '',
+      reviewStime: '',
+      reviewEtime: '',
+      currentPage: '',
+      answerEtime: '',
+      megagameId: '',
+      uid: '',
+      img: '',
+      activeSteps: 2,
+      num: 0,
     }
   },
-  created() {
-
-  },
-  mounted(){
-  this.megeme();
-  
+  created() {},
+  mounted() {
+    this.megeme()
   },
   methods: {
-
-//获取进度
-megeme(){
-const params = {
-            transCode: 'D00027',
-          }
-          request(params)
-            .then((res) => {
-              this.megagameId=res.megagameId;
-              sessionStorage.setItem('megagameId',res.megagameId)
-           this.appleStime=this.shijiantime(res.appleStime);//报名
-         //  this.appleEtime=this.shijiantime(res.appleStime);//预演、领题
-           this.answerStime=this.shijiantime(res.answerStime);//答题、领题
-          this.answerEtime=this.shijiantime(res.answerEtime);// 答题结束
+    //获取进度
+    megeme() {
+      const params = {
+        transCode: 'D00027',
+      }
+      request(params)
+        .then((res) => {
+          this.megagameId = res.megagameId
+          sessionStorage.setItem('megagameId', res.megagameId)
+          this.appleStime = this.shijiantime(res.appleStime) //报名
+          //  this.appleEtime=this.shijiantime(res.appleStime);//预演、领题
+          this.answerStime = this.shijiantime(res.answerStime) //答题、领题
+          this.answerEtime = this.shijiantime(res.answerEtime) // 答题结束
           // this.baogao=this.shijiantime(res.answerEtime);
-           this.reportEtime=this.shijiantime(res.reportEtime);//报告上传
-           this.reviewStime=this.shijiantime(res.reviewStime);//评委评分
-           this.reviewEtime=this.shijiantime(res.reviewEtime);//查看结果
-             let datatime=new Date(this.appleStime);
-            this.time=datatime.getTime(datatime) //预演、领题
-              let datatime2=new Date(this.answerStime);//答题、领题
-             this.answerS=datatime2.getTime(datatime2)
-              let datatime22=new Date(this.answerEtime);//答题、领题结束
-             this.answerEtime1=datatime22.getTime(datatime22)
-                let datatime3=new Date(this.reportEtime);//报告上传
-              this.reportE=datatime3.getTime(datatime3)
-                let datatime4=new Date(this.reviewStime);//评委评分
-               this.reviewS=datatime4.getTime(datatime4)
-                let datatime5=new Date(this.reviewEtime);////查看结果
-             this.reviewE=datatime5.getTime(datatime5)
-        
-              //获取当前时间
-            var myDate = new Date();
-           // var myDate = new Date("2021-05-02");
-            this.newtime=myDate.getTime(myDate);
-          
-           //判断时间显示
-           if(this.newtime>= this.time && this.newtime <this.answerS){
-            this.status='2';
-              this.num=40;
-              this.timequjian=this.appleEtime+'~'+this.answerStime
-           }else if(this.newtime>= this.answerS && this.newtime <this.answerEtime1){
-              this.status='3';
-               this.num=60;
-                 this.timequjian=this.answerStime+'~'+this.answerEtime
-           }else if(this.newtime>= this.answerS && this.newtime <this.reviewEtime){
-              this.status='4';
-              this.num=80;
-                this.timequjian=this.answerEtime+'~'+this.reviewStime
-           }else if(this.newtime>= this.reviewS && this.newtime <this.reviewE){
-               this.num=100;
-           this.status='5';
-             this.timequjian=this.reviewStime+'~'+this.reviewEtime
-           }else if(this.reviewE<=this.newtime){
-             this.status='6';
-               this.timequjian=this.reviewEtime
-           }else{
-           }
-            })
-           
-            .catch((err) => {})
-           
-            
-           
-},
-  shijiantime(times){
-    var timearr = times.replace(" ", ":").replace(/\:/g, "-").split("-");
-    var timestr = ""+timearr[0]+"-" + timearr[1] + "-" + timearr[2];
-    return timestr
-},
-//时间转化
- clickliti(name){
-  switch(name){
-      case 'topic':
-        this.$router.replace({
-                path: '/topic',
-                 query:{id:"0",megagameId:this.megagameId},
-              })
-              sessionStorage.setItem("businessType",'0')
-      break
-       case 'dati':
-           this.$router.replace({
-                path: '/topic',
-                 query:{id:"1",megagameId:this.megagameId},
-              })
-                sessionStorage.setItem("businessType",'1')
-              
-        break;
-       case 'baogaos':
-         this.$router.replace('/userLayout/project');
-        break;
-      case 'pingfen':
-         this.$router.replace('/userLayout/owerdas');
-        break;
-      case 'result':
-      console.log(name);
-        this.$router.replace('/result');
-      break
-      case 'matchLayout':
-      this.$router.replace('/matchLayout');  
-      break
+          this.reportEtime = this.shijiantime(res.reportEtime) //报告上传
+          this.reviewStime = this.shijiantime(res.reviewStime) //评委评分
+          this.reviewEtime = this.shijiantime(res.reviewEtime) //查看结果
+          let datatime = new Date(this.appleStime)
+          this.time = datatime.getTime(datatime) //预演、领题
+          let datatime2 = new Date(this.answerStime) //答题、领题
+          this.answerS = datatime2.getTime(datatime2)
+          let datatime22 = new Date(this.answerEtime) //答题、领题结束
+          this.answerEtime1 = datatime22.getTime(datatime22)
+          let datatime3 = new Date(this.reportEtime) //报告上传
+          this.reportE = datatime3.getTime(datatime3)
+          let datatime4 = new Date(this.reviewStime) //评委评分
+          this.reviewS = datatime4.getTime(datatime4)
+          let datatime5 = new Date(this.reviewEtime) ////查看结果
+          this.reviewE = datatime5.getTime(datatime5)
 
-    }
+          //获取当前时间
+          var myDate = new Date()
+          //var myDate = new Date("2021-05-02");
+          this.newtime = myDate.getTime(myDate)
 
-},
-//未开放
-weikaifang(){
-  Message("未到开放的时间");
-},
-//ywc
-ywc(){
-    Message.warning("已结束");
-}
-// 图片显示
-//判断时间
-// dianji(newtime1,time1,lasttime,path){
-// if(newtime1 >= time1 && newtime1 <= lasttime){
-//  this.img=
-//    this.$router.replace(path)
-//   }else if(newtime1>lasttime){
-//     console.log(newtime1-lasttime);
-//     alert("已结束")
-//   }
-//   else{
-//    alert("还没到开放的时间")
-//   }
-// }
+          //判断时间显示
+          if (this.newtime >= this.time && this.newtime < this.answerS) {
+            this.status = '2'
+            this.num = 40
+            this.timequjian = this.appleEtime + '~' + this.answerStime
+          } else if (
+            this.newtime >= this.answerS &&
+            this.newtime < this.answerEtime1
+          ) {
+            this.status = '3'
+            this.num = 60
+            this.timequjian = this.answerStime + '~' + this.answerEtime
+          } else if (
+            this.newtime >= this.answerS &&
+            this.newtime < this.reviewEtime
+          ) {
+            this.status = '4'
+            this.num = 80
+            this.timequjian = this.answerEtime + '~' + this.reviewStime
+          } else if (
+            this.newtime >= this.reviewS &&
+            this.newtime < this.reviewE
+          ) {
+            this.num = 100
+            this.status = '5'
+            this.timequjian = this.reviewStime + '~' + this.reviewEtime
+          } else if (this.reviewE <= this.newtime) {
+            this.status = '6'
+            this.timequjian = this.reviewEtime
+          } else {
+          }
+        })
+        .catch((err) => {})
+    },
+    shijiantime(times) {
+      var timearr = times.replace(' ', ':').replace(/\:/g, '-').split('-')
+      var timestr = '' + timearr[0] + '-' + timearr[1] + '-' + timearr[2]
+      return timestr
+    },
+    //时间转化
+    clickliti(name) {
+      switch (name) {
+        case 'topic':
+          this.$router.push({
+            path: '/topic',
+            query: { id: '0', megagameId: this.megagameId },
+          })
+          sessionStorage.setItem('businessType', '0')
+          break
+        case 'dati':
+          this.$router.push({
+            path: '/topic',
+            query: { id: '1', megagameId: this.megagameId },
+          })
+          sessionStorage.setItem('businessType', '1')
+
+          break
+        case 'baogaos':
+          this.$router.push('/userLayout/project')
+          break
+        case 'pingfen':
+          this.$router.push('/userLayout/owerdas')
+          break
+        case 'result':
+          this.$router.push('/result')
+          break
+        case 'matchLayout':
+          this.$router.push('/matchLayout')
+          break
+      }
+    },
+    //未开放
+    weikaifang() {
+      Message('未到开放的时间')
+    },
+    //ywc
+    ywc() {
+      Message.warning('已结束')
+    },
+    // 图片显示
+    //判断时间
+    // dianji(newtime1,time1,lasttime,path){
+    // if(newtime1 >= time1 && newtime1 <= lasttime){
+    //  this.img=
+    //    this.$router.replace(path)
+    //   }else if(newtime1>lasttime){
+    //     console.log(newtime1-lasttime);
+    //     alert("已结束")
+    //   }
+    //   else{
+    //    alert("还没到开放的时间")
+    //   }
+    // }
   },
 }
 </script>
@@ -291,122 +323,117 @@ ywc(){
 <style lang="scss" scoped>
 @import '@/styles/variables.scss';
 @import '@/styles/mixin.scss';
-.el-step__title.is-process{
-  cursor: pointer;
-}
-.i{
-  width: 50px;
-  height: 50px;
-  border-radius: 50%;
-  overflow: hidden;
-  background-color: #001C50;
-}
-.el-progress__text{
-  display: none;
-}
-.megagame {
-  font-family: 'STHeitiSC-Light';
-  // @include w_h(100%, 100%);
-  @include w_h(100%);
-  // padding: 30px 60px;
-  background: #000;
-  height: 100%;
-  flex:1;
-  position: relative;
-  .img{
-    // height: scal(100vh);
-      @include w_h(100%);
-      position: absolute;
-      z-index: 0;
-      bottom: -3px;
-      img{
-     @include w_h(100%);
-      }
+.timeline {
+  @include w_h();
+  color: $color_f;
+  line-height: 1.5;
+  .bm_title {
+    text-align: right;
+    &:hover {
+      opacity: 0.8;
+      cursor: pointer;
+    }
   }
-  .da_content{
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 5% 0;
-  position: relative;
-  // transform: translateY(10%);
-  
-  .title{
+  .bm_succeed {
+    padding: 20px 0 0;
     text-align: center;
+    img {
+      @include w_h(60px);
+    }
+    .wenzi {
+      padding: 15px 0;
+      font-size: 26px;
+    }
   }
-
- .content{
+  .step {
+    position: relative;
+    top: 74px;
+    ul {
+      position: absolute;
+      top: -14px;
       width: 100%;
-      height:598px;
-       background: url('../../../assets/match/content.png') no-repeat;
-        background-size: cover;
-      background-position: center 0;
-      padding: 67px;
-      .bm_title{
-        text-align: right;
-        color: #fff;
-        font-size: 16px;
-      }
-      .bm_succeed{
-        width: 50%;
-        max-width:376px;
-        margin: 20px auto; 
-        color: #fff; 
-        font-size: 16px;
-           text-align: center;
-        .bmimg{
-          text-align: center;
+      display: flex;
+      li {
+        text-align: center;
+        flex: 1;
+        color: rgba(255, 255, 255, 0.3);
+        .i {
+          @include w_h(50px, 50px);
+          border-radius: 50%;
+          overflow: hidden;
+          background-color: #001c50;
+          border: 5px solid #001c50;
+          img {
+            @include w_h();
+          }
         }
-        .wenzi{
-          padding: 19px 0;
-          font-size: 30px;
+        img {
+          transition: all 0.3s;
+        }
+        &:hover {
+          cursor: pointer;
+          img {
+            opacity: 0.8;
+          }
+          p {
+            color: rgba(255, 255, 255, 1);
+          }
+          span {
+            color: rgba(255, 255, 255, 1);
+          }
+        }
+        .i {
+          margin: 0 auto;
+        }
+        p {
+          line-height: 34px;
+        }
+      }
+      li.on {
+        color: $color_f;
+        &:hover {
+          p {
+            opacity: 0.8;
+          }
+          span {
+            opacity: 0.8;
+          }
         }
-        
       }
-    
- }
- 
+    }
   }
 }
-.el-step__icon.is-text {
-    background-color: yellow;
-}
-.step{
-  position: relative;
-  .line{
-    width: 100%;
-       .ul{
-         display: flex;
-         li{
-            
-           text-align: center;
-           flex: 1;
-           .i{
-                margin: 0 auto;
-           }
-           p{
-             color: #fff;
-           }
-         }
-       }
+</style>
 
-  }
-  .div{
-    position: absolute;
-        top: -14px;
-  }
-  .tu{
-    margin-top: 100px;
-  }
+<style lang="scss">
+@import '@/styles/variables.scss';
+@import '@/styles/mixin.scss';
 
-}
-.el-progress{
-  width: 91%;
-  margin: 0 auto;
-  padding-left: 20px;
-     margin-top: 74px;
+.timeline {
+  .el-step {
+    &__title.is-process {
+      cursor: pointer;
+    }
 
-}
-.footer{
-        background: #2b2828;
+    &__icon.is-text {
+      background-color: yellow;
+    }
+  }
+  .el-progress {
+    &-bar {
+      padding: 0 8%;
+      margin: 0;
+    }
+    &-bar__outer {
+      height: 1px !important;
+      background-color: #30c9c9;
+    }
+    &-bar__inner {
+      opacity: 0.8;
+    }
+    &__text {
+      display: none;
+    }
   }
+}
 </style>

src/views/megagame/topic/components/DetailLayout/index.vue

@@ -0,0 +1,176 @@
+/*DetailLayout*/
+<template>
+  <div class="details">
+    <div class="footer-img">
+      <img src="@/assets/match/litibj.png" />
+    </div>
+    <div class="content">
+      <div class="title">
+        <div class="back" @click="back">
+          <img src="@/assets/match/r.png" alt="图片" />
+        </div>
+        <h3>{{ title }}</h3>
+      </div>
+      <div class="container">
+        <div class="container-bg">
+          <img src="@/assets/match/content.png" />
+        </div>
+        <div class="container-box">
+          <div class="slot-container">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DetailLayout',
+  props: {
+    title: {
+      type: String,
+      default: () => '标题',
+    },
+  },
+  methods: {
+    back() {
+      this.$router.go(-1)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/variables.scss';
+@import '@/styles/mixin.scss';
+.details {
+  @include w_h(100%, 100%);
+  @include flex(center);
+  position: relative;
+  background: $color_0;
+  .footer-img {
+    @include w_h(100%);
+    @include position(fixed, auto, -3px, 0, 0);
+    background: $color_0;
+    img {
+      @include w_h(100%);
+    }
+  }
+  .content {
+    @include w_h(95%, 90%);
+    min-width: 900px;
+    min-height: 560px;
+    .title {
+      @include w_h(100%, 60px);
+      @include flex();
+      .back {
+        transition: all 0.3s;
+        &:hover {
+          cursor: pointer;
+          opacity: 0.8;
+        }
+      }
+      h3 {
+        @include w_h(100%);
+        font-size: 28px;
+        text-align: center;
+        color: #007af9;
+      }
+    }
+
+    .container {
+      @include w_h(100%, calc(100% - 60px));
+      position: relative;
+      overflow: hidden;
+      &-bg {
+        @include position(absolute, 0, 0, 0, 0);
+        img {
+          @include w_h(100%, 100%);
+        }
+      }
+
+      &-box {
+        @include w_h(100%, 100%);
+        position: relative;
+        padding: 40px 3.8%;
+        overflow: hidden;
+
+        .slot-container {
+          @include w_h(100%, 100%);
+          padding: 0 30px;
+          overflow: auto;
+
+          /*谷歌、safari、qq浏览器、360浏览器滚动条样式*/
+          /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
+          &::-webkit-scrollbar {
+            width: 8px;
+            height: 3px;
+            background: transparent;
+          }
+          /*定义滚动条轨道 内阴影+圆角*/
+          &::-webkit-scrollbar-track {
+            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+            border-radius: 10px;
+            background: transparent;
+          }
+
+          /*定义滑块 内阴影+圆角*/
+          &::-webkit-scrollbar-thumb {
+            border-radius: 10px;
+            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+            background: #0196fb;
+          }
+
+          /*滑块效果*/
+          &::-webkit-scrollbar-thumb:hover {
+            border-radius: 5px;
+            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+            background: rgba(0, 139, 250, 0.9);
+          }
+        }
+
+        .detail {
+          @include w_h();
+          @include flex(space-between, flex-start);
+          .content-left {
+            @include w_h(70%);
+            color: $color_f;
+            padding: 15px 0;
+            .title {
+              font-size: 22px;
+              color: $color_f;
+            }
+            .dec {
+              font-size: 16px;
+              line-height: 26px;
+              img {
+                vertical-align: middle;
+              }
+            }
+            .imgs {
+              padding: 10px 0;
+              text-align: center;
+              img {
+                max-width: 100%;
+              }
+              p {
+                font-size: 12px;
+                line-height: 28px;
+              }
+            }
+          }
+          .content-right {
+            @include w_h(26%);
+            .title {
+              font-size: 22px;
+              color: #fde800;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/megagame/topic/detailaw.vue

@@ -1,299 +0,0 @@
-/*hcfd*/
-<template>
-<div>
-  <div class="megagame">
-    <div class="img">
-      <img src="../../../assets/match/litibj.png"/></div>
-      <div  class="me_container clearfix">
-          <!-- 选项 -->
-       
-          <div class=" clearfix">
-          <div class="me_img"  @click="back">
-              <img src="../../../assets/match/r.png" alt="图片">
-          </div>
-          <div class='ne_top'>
-           <ul class="tabs">
-            <!-- <li
-              class="timu_title"
-              v-for="(item,index) in tabsParam"
-              :key="index"
-              @click="toggleTabs(index)"
-              :class="{active:index==nowIndex}"
-            >{{item}}</li> -->
-            <li  class="timu_title active">前沿-HCFDLab-Agard Wing升阻力曲线分析</li>
-           
-           
-          </ul>   
-          </div>
-          </div>
-              <div  class="me_content clearfix">
-                       <div class="ju jux"><img src="../../../assets/match/jux.png" alt="图片"></div>
-                         <div class="ju jur"><img src="../../../assets/match/jux.png" alt="图片"></div>
-                  <div class="me_padding">
-                      <div class="me_contenttop">
-                        <div class="xq_contenttopleft">
-                           <p class="xq_title">目标:</p>
-                           <p class="xq_dec">Agard 445.6薄翼型机翼在0.678、0.901和1.141三个马赫数下的升力阻力曲线。</p>
-                        <div>
-                             <p class="xq_title">模型参数:</p>
-                               <p class="xq_dec">图1 Agard-wing 445.6的平面图</p>
-                            <div class="xq_imgs">
-                              <img
-                                src="../../../assets/match/Agard-wing1.png"
-                                alt="图片"
-                              />
-                            </div>
-                            <p class="xq_dec">表 1 Agard-wing 445.6的几何尺寸</p>
-                            <table border="0.1" class="xq_dec">
-                              <tr>
-                                <td>Mass (kg)</td>
-                                <td>2.3786</td>
-                              </tr>
-                              <tr>
-                                <td>Root chord (m)</td>
-                                <td>0.5587</td>
-                              </tr>
-                               <tr>
-                                <td>RTip chord (m)</td>
-                                <td>0.3687</td>
-                              </tr>
-                               <tr>
-                                <td>Span (m)</td>
-                                <td>0.762</td>
-                              </tr>
-                               <tr>
-                                <td>Aera（m2)</td>
-                                <td>0.3533</td>
-                              </tr>
-                               <tr>
-                                <td>Section shape</td>
-                                <td>NACA6A010</td>
-                              </tr>
-                               <tr>
-                                <td>Sweepback (degree)</td>
-                                <td>45</td>
-                              </tr>
-                            </table>
-
-                            <p class="xq_dec">表 2 不同飞行条件下的大气密度</p>
-                            <table  class="xq_dec">
-                              <tr>
-                                <td>仿真条件</td>
-                                <td>条件 1</td>
-                                <td>条件 2</td>
-                                <td>条件 3</td>
-                              </tr>
-                              <tr>
-                                <td>马赫(Ma)</td>
-                                <td>0.678</td>
-                                <td>0.901</td>
-                                <td>1.141</td>
-                              </tr>
-                              <tr>
-                                <td>大气密度 (kg/m3)</td>
-                                <td>0.20829</td>
-                                <td>0.0995</td>
-                                <td>0.07836</td>
-                              </tr>
-                            </table>
-                             <p class="xq_title">网格格式:</p>
-                             <p class="xq_dec">非结构流体软件HCFDLab支持四面体、金字塔、三棱柱、六面体等多种网格类型，这种非结构化网格，无论气动外形复杂度有多高，都可以方便、快速地进行网格划分，并根据用户需要和实际外形特点对模型进行分块（part）。用网格生成软件（如ICEM或PointWise）划分好整个流场的网格后，导出 .ugrid 格式网格文件，HCFDLab可直接读入此类型的网格文件，在导出 .ugrid 格式网格文件时会同时生成 .dat 格式的边界文件，这两个文件一起构成非结构气弹模块流场分析准备文件。目前，HCFDLab只支持这一种网格文件类型。</p>
-                        </div>
-
-                        </div>
-                         <div class="xq_contenttopright">
-                             <p class=" color1" >相关资料</p>
-                        </div>
-                      </div>
-                     
-                  </div>
-                  
-
-              </div>
-      </div>
-
-      </div>
-  
-</div>
-</template>
-
-<script>
-import { request, getImage } from "@/utils/request";
-import { parseTime } from "@/utils/index";
-import store from "@/store"; // vue状态管理
-import { Message, MessageBox } from "element-ui"; // 引入Message、MessageBox
-export default {
-  name: "megagame",
-  components: {},
-  data() {
-    return {};
-  },
-  created() {},
-  mounted() {},
-  methods: {
-    back() {
-      this.$router.replace("/topic");
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import "@/styles/variables.scss";
-@import "@/styles/mixin.scss";
-.megagame {
-  font-family: "STHeitiSC-Light";
-  // @include w_h(100%, 100%);
-  @include w_h(100%);
-  // padding: 30px 60px;
-  background: #000;
-  overflow: hidden;
-  flex: 1;
-  position: relative;
-
-  .img {
-    // height: scal(100vh);
-    @include w_h(100%);
-    position: absolute;
-    z-index: 0;
-    bottom: -3px;
-    img {
-      @include w_h(100%);
-    }
-  }
-  .me_container {
-    max-width: 1200px;
-    margin: 3% auto;
-    margin-bottom: 12%;
-
-    .me_img {
-      float: left;
-    }
-    .ne_top {
-      padding-left: 100px;
-      ul {
-        display: flex;
-        justify-content: center;
-        align-content: center;
-        li {
-          font-size: 30px;
-          font-family: DFPLiJinHeiW8-GB;
-          font-weight: 600;
-          color: #ffffff;
-          line-height: 20px;
-          opacity: 0.5;
-          margin-right: 51px;
-        }
-        .active {
-          color: #007af9;
-          opacity: 1;
-        }
-      }
-    }
-    .me_content {
-      margin-top: 52px;
-      box-shadow: 0 0 24px 12px #007af9;
-      position: relative;
-      padding: 20px;
-      border-radius: 20px;
-      background-color: #001c50;
-      .me_padding {
-        box-shadow: 0 0 24px 12px #001c50;
-        background-color: #001c50;
-        padding: 25px;
-        .me_contenttop {
-          .xq_title {
-            height: 53px;
-            line-height: 53px;
-            font-size: 24px;
-            color: #fff;
-            font-weight: 500;
-          }
-          .xq_dec {
-            font-size: 18px;
-            color: #fff;
-            padding: 20px 0;
-          }
-        }
-      }
-      .ju {
-        position: absolute;
-        position: absolute;
-        top: -22px;
-      }
-      .jux {
-        left: 70px;
-      }
-      .jur {
-        right: 70px;
-      }
-    }
-    .me_contentbotton {
-      padding: 15px 43px 43px 43px;
-      background: rgba(255, 255, 255, 0.2);
-      color: #fff;
-      .contentbotton_top {
-        position: relative;
-        .contentbotton_get {
-          position: absolute;
-          right: 0;
-          top: 0;
-          color: #008dfa;
-          width: 68px;
-        }
-      }
-      li {
-        font-size: 16px;
-        padding: 30px 0 15px 0;
-        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
-        .explain {
-          display: inline-block;
-          white-space: nowrap;
-          width: 100%;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          padding: 15px 0;
-        }
-        .contentbotton_title {
-          font-size: 20px;
-        }
-      }
-    }
-  }
-}
-.xq_imgs {
-  width: 500px;
-  height: 300px;
-  overflow: hidden;
-  margin: 20px auto;
-}
-.xq_imgs img {
-  width: 100%;
-  height: 100%;
-}
-.tips {
-  font-size: 32px;
-  color: #fff;
-  text-align: center;
-}
-.footer {
-  background: #2b2828;
-}
-.me_contenttop {
-  display: flex;
-}
-.xq_contenttopleft {
-  width: 70%;
-  padding: 10px;
-}
-.xq_contenttopright {
-  width: 30%;
-}
-.color1 {
-  height: 80px;
-  line-height: 80px;
-  font-size: 24px;
-  font-weight: 500;
-  color: #fde800;
-}
-</style>

src/views/megagame/topic/detailbyy.vue

@@ -1,254 +0,0 @@
-/*bladesign*/
-<template>
-<div>
-  <div class="megagame">
-    <div class="img">
-      <img src="../../../assets/match/litibj.png"/></div>
-      <div  class="me_container clearfix">
-          <!-- 选项 -->
-       
-          <div class=" clearfix">
-          <div class="me_img"  @click="back">
-              <img src="../../../assets/match/r.png" alt="图片">
-          </div>
-          <div class='ne_top'>
-           <ul class="tabs">
-            <!-- <li
-              class="timu_title"
-              v-for="(item,index) in tabsParam"
-              :key="index"
-              @click="toggleTabs(index)"
-              :class="{active:index==nowIndex}"
-            >{{item}}</li> -->
-            <li  class="timu_title active">前沿-Bladesign-矩形截面梁受力分析</li>
-           
-           
-          </ul>   
-          </div>
-          </div>
-              <div  class="me_content clearfix">
-                       <div class="ju jux"><img src="../../../assets/match/jux.png" alt="图片"></div>
-                         <div class="ju jur"><img src="../../../assets/match/jux.png" alt="图片"></div>
-                  <div class="me_padding">
-                      <div class="me_contenttop">
-                        <div class="xq_contenttopleft">
-                           <p class="xq_title">目标:</p>
-                           <p class="xq_dec">本测试算例对末端受力的矩形截面悬臂梁进行静态分析，计算梁轴线上各点的位移</p>
-                        <div>
-                             <p class="xq_title">模型参数:</p>
-                             <p class="xq_dec">算例中矩形截面梁的几何模型如图所示。</p>
-                              <div class="xq_imgs">
-                                <img 
-                                  src="../../../assets/match/byy1.png"
-                                  alt="图片"
-                                />
-                              </div>
-                              <p class="xq_dec">模型的截面为0.4m*0.2m的矩形，长5m。网格采用25mm*25mm的二次四边形面单元和100mm的beam单元。边界条件如图1 2所示，一端整个截面固定全部六个自由度，另一端几何中心点受力（Y=Z=0），大小为100kN，方向沿Z轴正向。</p>
-                              <div class="xq_imgs">
-                                <img 
-                                  src="../../../assets/match/byy2.png"
-                                  alt="图片"
-                                />
-                              </div>
-                               <p class="xq_dec">模型采用各向同性材料，弹性模量E=136GPa，泊松比v=0.34。</p>
-                              
-
-                        </div>
-
-                        </div>
-                         <div class="xq_contenttopright">
-                             <p class=" color1" >相关资料</p>
-                        </div>
-                      </div>
-                     
-                  </div>
-                  
-
-              </div>
-      </div>
-
-      </div>
-  
-</div>
-</template>
-
-<script>
-import { request, getImage } from "@/utils/request";
-import { parseTime } from "@/utils/index";
-import store from "@/store"; // vue状态管理
-import { Message, MessageBox } from "element-ui"; // 引入Message、MessageBox
-export default {
-  name: "megagame",
-  components: {},
-  data() {
-    return {};
-  },
-  created() {},
-  mounted() {},
-  methods: {
-    back() {
-      this.$router.replace("/topic");
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import "@/styles/variables.scss";
-@import "@/styles/mixin.scss";
-.megagame {
-  font-family: "STHeitiSC-Light";
-  // @include w_h(100%, 100%);
-  @include w_h(100%);
-  // padding: 30px 60px;
-  background: #000;
-  overflow: hidden;
-  flex: 1;
-  position: relative;
-
-  .img {
-    // height: scal(100vh);
-    @include w_h(100%);
-    position: absolute;
-    z-index: 0;
-    bottom: -3px;
-    img {
-      @include w_h(100%);
-    }
-  }
-  .me_container {
-    max-width: 1200px;
-    margin: 3% auto;
-    margin-bottom: 12%;
-
-    .me_img {
-      float: left;
-    }
-    .ne_top {
-      padding-left: 100px;
-      ul {
-        display: flex;
-        justify-content: center;
-        align-content: center;
-        li {
-          font-size: 30px;
-          font-family: DFPLiJinHeiW8-GB;
-          font-weight: 600;
-          color: #ffffff;
-          line-height: 20px;
-          opacity: 0.5;
-          margin-right: 51px;
-        }
-        .active {
-          color: #007af9;
-          opacity: 1;
-        }
-      }
-    }
-    .me_content {
-      margin-top: 52px;
-      box-shadow: 0 0 24px 12px #007af9;
-      position: relative;
-      padding: 20px;
-      border-radius: 20px;
-      background-color: #001c50;
-      .me_padding {
-        box-shadow: 0 0 24px 12px #001c50;
-        background-color: #001c50;
-        padding: 25px;
-        .me_contenttop {
-          .xq_title {
-            height: 53px;
-            line-height: 53px;
-            font-size: 24px;
-            color: #fff;
-            font-weight: 500;
-          }
-          .xq_dec {
-            font-size: 18px;
-            color: #fff;
-            padding: 20px 0;
-          }
-        }
-      }
-      .ju {
-        position: absolute;
-        position: absolute;
-        top: -22px;
-      }
-      .jux {
-        left: 70px;
-      }
-      .jur {
-        right: 70px;
-      }
-    }
-    .me_contentbotton {
-      padding: 15px 43px 43px 43px;
-      background: rgba(255, 255, 255, 0.2);
-      color: #fff;
-      .contentbotton_top {
-        position: relative;
-        .contentbotton_get {
-          position: absolute;
-          right: 0;
-          top: 0;
-          color: #008dfa;
-          width: 68px;
-        }
-      }
-      li {
-        font-size: 16px;
-        padding: 30px 0 15px 0;
-        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
-        .explain {
-          display: inline-block;
-          white-space: nowrap;
-          width: 100%;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          padding: 15px 0;
-        }
-        .contentbotton_title {
-          font-size: 20px;
-        }
-      }
-    }
-  }
-}
-.xq_imgs {
-  width: 500px;
-  height: 300px;
-  overflow: hidden;
-  margin: 20px auto;
-}
-.xq_imgs img {
-  width: 100%;
-  height: 100%;
-}
-.tips {
-  font-size: 32px;
-  color: #fff;
-  text-align: center;
-}
-.footer {
-  background: #2b2828;
-}
-.me_contenttop {
-  display: flex;
-}
-.xq_contenttopleft {
-  width: 70%;
-  padding: 10px;
-}
-.xq_contenttopright {
-  width: 30%;
-}
-.color1 {
-  height: 80px;
-  line-height: 80px;
-  font-size: 24px;
-  font-weight: 500;
-  color: #fde800;
-}
-</style>

src/views/megagame/topic/detailbzs1.vue

@@ -1,281 +0,0 @@
-/*bladesign*/
-<template>
-<div>
-  <div class="megagame">
-    <div class="img">
-      <img src="../../../assets/match/litibj.png"/></div>
-      <div  class="me_container clearfix">
-          <!-- 选项 -->
-       
-          <div class=" clearfix">
-          <div class="me_img"  @click="back">
-              <img src="../../../assets/match/r.png" alt="图片">
-          </div>
-          <div class='ne_top'>
-           <ul class="tabs">
-            <!-- <li
-              class="timu_title"
-              v-for="(item,index) in tabsParam"
-              :key="index"
-              @click="toggleTabs(index)"
-              :class="{active:index==nowIndex}"
-            >{{item}}</li> -->
-            <li  class="timu_title active">前沿-Bladesign-截面悬臂梁的动态特性（模态、瞬态）分析</li>
-           
-           
-          </ul>   
-          </div>
-          </div>
-              <div  class="me_content clearfix">
-                       <div class="ju jux"><img src="../../../assets/match/jux.png" alt="图片"></div>
-                         <div class="ju jur"><img src="../../../assets/match/jux.png" alt="图片"></div>
-                  <div class="me_padding">
-                      <div class="me_contenttop">
-                        <div class="xq_contenttopleft">
-                           <p class="xq_title">目标:</p>
-                           <p class="xq_dec"> a)	对某型截面梁进行VABS分析，获取截面刚度矩阵、质量矩阵、剪切中心；<br>
-                                              b)	对某型悬臂梁进行模态分析，获取前10阶特征频率；<br>
-                                              c)	在某型悬臂梁的自由端施加Z向随时间变化的动载荷，分析其瞬态响应，并绘制梁自由端几何中心随时间的位移曲线。
-                                              </p>
-                        <div>
-                             <p class="xq_title">模型参数:</p>
-                             <p class="xq_dec">模型采用正交各向异性材料，材料具体参数如梁材料参数表所示。</p>
-                             <table class="xq_dec">
-                               <tr>
-                                <td>ρ</td>
-                                <td>E1</td>
-                                <td>E2</td>
-                                <td>E3</td>
-                                <td>G12</td>
-                                <td>G23</td>
-                                <td>G31</td>
-                                <td>V12</td>
-                                <td>V23</td>
-                                <td>V31</td>
-                               </tr>
-                               <tr>
-                                <td>1700Kg/m**3</td>
-                                <td>136GPa</td>
-                                <td>9.04GPa</td>
-                                <td>9.04GPa</td>
-                                <td>3.87GPa</td>
-                                <td>3.87GPa</td>
-                                <td>3.87GPa</td>
-                                <td>0.34</td>
-                                <td>0.01</td>
-                                <td>0.01</td>
-                               </tr>
-                               <tr>
-                                <td>内部加强梁</td>
-                                <td>116GPa</td>
-                                <td>13.6GPa</td>
-                                <td>9.04GPa</td>
-                                <td>5GPa</td>
-                                <td>3.87GPa</td>
-                                <td>3.87GPa</td>
-                                <td>0.328</td>
-                                <td>0.01</td>
-                                <td>0.01</td>
-                               </tr>
-                             </table>
-                              
-
-                        </div>
-
-                        </div>
-                         <div class="xq_contenttopright">
-                             <p class=" color1" >相关资料</p>
-                        </div>
-                      </div>
-                     
-                  </div>
-                  
-
-              </div>
-      </div>
-
-      </div>
-  
-</div>
-</template>
-
-<script>
-import { request, getImage } from "@/utils/request";
-import { parseTime } from "@/utils/index";
-import store from "@/store"; // vue状态管理
-import { Message, MessageBox } from "element-ui"; // 引入Message、MessageBox
-export default {
-  name: "megagame",
-  components: {},
-  data() {
-    return {};
-  },
-  created() {},
-  mounted() {},
-  methods: {
-    back() {
-      this.$router.replace("/topic");
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import "@/styles/variables.scss";
-@import "@/styles/mixin.scss";
-.megagame {
-  font-family: "STHeitiSC-Light";
-  // @include w_h(100%, 100%);
-  @include w_h(100%);
-  // padding: 30px 60px;
-  background: #000;
-  overflow: hidden;
-  flex: 1;
-  position: relative;
-
-  .img {
-    // height: scal(100vh);
-    @include w_h(100%);
-    position: absolute;
-    z-index: 0;
-    bottom: -3px;
-    img {
-      @include w_h(100%);
-    }
-  }
-  .me_container {
-    max-width: 1200px;
-    margin: 3% auto;
-    margin-bottom: 12%;
-
-    .me_img {
-      float: left;
-    }
-    .ne_top {
-      padding-left: 100px;
-      ul {
-        display: flex;
-        justify-content: center;
-        align-content: center;
-        li {
-          font-size: 30px;
-          font-family: DFPLiJinHeiW8-GB;
-          font-weight: 600;
-          color: #ffffff;
-          line-height: 20px;
-          opacity: 0.5;
-          margin-right: 51px;
-        }
-        .active {
-          color: #007af9;
-          opacity: 1;
-        }
-      }
-    }
-    .me_content {
-      margin-top: 52px;
-      box-shadow: 0 0 24px 12px #007af9;
-      position: relative;
-      padding: 20px;
-      border-radius: 20px;
-      background-color: #001c50;
-      .me_padding {
-        box-shadow: 0 0 24px 12px #001c50;
-        background-color: #001c50;
-        padding: 25px;
-        .me_contenttop {
-          .xq_title {
-            height: 53px;
-            line-height: 53px;
-            font-size: 24px;
-            color: #fff;
-            font-weight: 500;
-          }
-          .xq_dec {
-            font-size: 18px;
-            color: #fff;
-            padding: 20px 0;
-          }
-        }
-      }
-      .ju {
-        position: absolute;
-        position: absolute;
-        top: -22px;
-      }
-      .jux {
-        left: 70px;
-      }
-      .jur {
-        right: 70px;
-      }
-    }
-    .me_contentbotton {
-      padding: 15px 43px 43px 43px;
-      background: rgba(255, 255, 255, 0.2);
-      color: #fff;
-      .contentbotton_top {
-        position: relative;
-        .contentbotton_get {
-          position: absolute;
-          right: 0;
-          top: 0;
-          color: #008dfa;
-          width: 68px;
-        }
-      }
-      li {
-        font-size: 16px;
-        padding: 30px 0 15px 0;
-        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
-        .explain {
-          display: inline-block;
-          white-space: nowrap;
-          width: 100%;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          padding: 15px 0;
-        }
-        .contentbotton_title {
-          font-size: 20px;
-        }
-      }
-    }
-  }
-}
-.xq_imgs {
-  width: 500px;
-  height: 300px;
-  overflow: hidden;
-  margin: 20px auto;
-}
-.xq_imgs img {
-  width: 100%;
-  height: 100%;
-}
-.tips {
-  font-size: 32px;
-  color: #fff;
-  text-align: center;
-}
-.footer {
-  background: #2b2828;
-}
-.me_contenttop {
-  display: flex;
-}
-.xq_contenttopleft {
-  width: 70%;
-  padding: 10px;
-}
-.xq_contenttopright {
-  width: 30%;
-}
-.color1 {
-  height: 80px;
-  line-height: 80px;
-  font-size: 24px;
-  font-weight: 500;
-  color: #fde800;
-}
-</style>

src/views/megagame/topic/detailbzs2.vue

@@ -1,269 +0,0 @@
-/*bladesign*/
-<template>
-<div>
-  <div class="megagame">
-    <div class="img">
-      <img src="../../../assets/match/litibj.png"/></div>
-      <div  class="me_container clearfix">
-          <!-- 选项 -->
-       
-          <div class=" clearfix">
-          <div class="me_img"  @click="back">
-              <img src="../../../assets/match/r.png" alt="图片">
-          </div>
-          <div class='ne_top'>
-           <ul class="tabs">
-            <!-- <li
-              class="timu_title"
-              v-for="(item,index) in tabsParam"
-              :key="index"
-              @click="toggleTabs(index)"
-              :class="{active:index==nowIndex}"
-            >{{item}}</li> -->
-            <li  class="timu_title active">前沿-Bladesign-考虑初始形变（预弯/预扭）的某形截面梁受力分析</li>
-           
-           
-          </ul>   
-          </div>
-          </div>
-              <div  class="me_content clearfix">
-                       <div class="ju jux"><img src="../../../assets/match/jux.png" alt="图片"></div>
-                         <div class="ju jur"><img src="../../../assets/match/jux.png" alt="图片"></div>
-                  <div class="me_padding">
-                      <div class="me_contenttop">
-                        <div class="xq_contenttopleft">
-                           <p class="xq_title">计算目标:</p>
-                           <p class="xq_dec"> a)	对考虑初始弯曲形变的某形截面梁进行VABS分析，获取截面刚度矩阵、质量矩阵、剪切中心；<br>
-b)	对考虑初始弯曲形变的某形截面悬臂梁进行静力分析，计算并绘制梁轴线上各点X轴和Z轴方向的位移。<br>
-c)	对考虑初始扭转形变的某形截面梁进行VABS分析，获取截面刚度矩阵、质量矩阵、剪切中心；<br>
-d)	对考虑初始弯曲形变的某形截面悬臂梁进行静力分析，计算并绘制梁轴线上各点Z轴方向的位移。
-
-                                              </p>
-                        <div>
-                             <p class="xq_title">模型参数:</p>
-                             <p class="xq_dec">模型采用正交各向异性材料，材料具体参数如梁材料参数表所示。</p>
-                             <table class="xq_dec">
-                               <tr>
-                                <td>E1</td>
-                                <td>E2</td>
-                                <td>E3</td>
-                                <td>G12</td>
-                                <td>G23</td>
-                                <td>G31</td>
-                                <td>V12</td>
-                                <td>V23</td>
-                                <td>V31</td>
-                               </tr>
-                               <tr>
-                                <td>136GPa</td>
-                                <td>9.04GPa</td>
-                                <td>9.04GPa</td>
-                                <td>3.87GPa</td>
-                                <td>3.87GPa</td>
-                                <td>3.87GPa</td>
-                                <td>0.34</td>
-                                <td>0.01</td>
-                                <td>0.01</td>
-                               </tr>
-                             </table>
-                              
-
-                        </div>
-
-                        </div>
-                         <div class="xq_contenttopright">
-                             <p class=" color1" >相关资料</p>
-                        </div>
-                      </div>
-                     
-                  </div>
-                  
-
-              </div>
-      </div>
-
-      </div>
-  
-</div>
-</template>
-
-<script>
-import { request, getImage } from "@/utils/request";
-import { parseTime } from "@/utils/index";
-import store from "@/store"; // vue状态管理
-import { Message, MessageBox } from "element-ui"; // 引入Message、MessageBox
-export default {
-  name: "megagame",
-  components: {},
-  data() {
-    return {};
-  },
-  created() {},
-  mounted() {},
-  methods: {
-    back() {
-      this.$router.replace("/topic");
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import "@/styles/variables.scss";
-@import "@/styles/mixin.scss";
-.megagame {
-  font-family: "STHeitiSC-Light";
-  // @include w_h(100%, 100%);
-  @include w_h(100%);
-  // padding: 30px 60px;
-  background: #000;
-  overflow: hidden;
-  flex: 1;
-  position: relative;
-
-  .img {
-    // height: scal(100vh);
-    @include w_h(100%);
-    position: absolute;
-    z-index: 0;
-    bottom: -3px;
-    img {
-      @include w_h(100%);
-    }
-  }
-  .me_container {
-    max-width: 1200px;
-    margin: 3% auto;
-    margin-bottom: 12%;
-
-    .me_img {
-      float: left;
-    }
-    .ne_top {
-      padding-left: 100px;
-      ul {
-        display: flex;
-        justify-content: center;
-        align-content: center;
-        li {
-          font-size: 30px;
-          font-family: DFPLiJinHeiW8-GB;
-          font-weight: 600;
-          color: #ffffff;
-          line-height: 20px;
-          opacity: 0.5;
-          margin-right: 51px;
-        }
-        .active {
-          color: #007af9;
-          opacity: 1;
-        }
-      }
-    }
-    .me_content {
-      margin-top: 52px;
-      box-shadow: 0 0 24px 12px #007af9;
-      position: relative;
-      padding: 20px;
-      border-radius: 20px;
-      background-color: #001c50;
-      .me_padding {
-        box-shadow: 0 0 24px 12px #001c50;
-        background-color: #001c50;
-        padding: 25px;
-        .me_contenttop {
-          .xq_title {
-            height: 53px;
-            line-height: 53px;
-            font-size: 24px;
-            color: #fff;
-            font-weight: 500;
-          }
-          .xq_dec {
-            font-size: 18px;
-            color: #fff;
-            padding: 20px 0;
-          }
-        }
-      }
-      .ju {
-        position: absolute;
-        position: absolute;
-        top: -22px;
-      }
-      .jux {
-        left: 70px;
-      }
-      .jur {
-        right: 70px;
-      }
-    }
-    .me_contentbotton {
-      padding: 15px 43px 43px 43px;
-      background: rgba(255, 255, 255, 0.2);
-      color: #fff;
-      .contentbotton_top {
-        position: relative;
-        .contentbotton_get {
-          position: absolute;
-          right: 0;
-          top: 0;
-          color: #008dfa;
-          width: 68px;
-        }
-      }
-      li {
-        font-size: 16px;
-        padding: 30px 0 15px 0;
-        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
-        .explain {
-          display: inline-block;
-          white-space: nowrap;
-          width: 100%;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          padding: 15px 0;
-        }
-        .contentbotton_title {
-          font-size: 20px;
-        }
-      }
-    }
-  }
-}
-.xq_imgs {
-  width: 500px;
-  height: 300px;
-  overflow: hidden;
-  margin: 20px auto;
-}
-.xq_imgs img {
-  width: 100%;
-  height: 100%;
-}
-.tips {
-  font-size: 32px;
-  color: #fff;
-  text-align: center;
-}
-.footer {
-  background: #2b2828;
-}
-.me_contenttop {
-  display: flex;
-}
-.xq_contenttopleft {
-  width: 70%;
-  padding: 10px;
-}
-.xq_contenttopright {
-  width: 30%;
-}
-.color1 {
-  height: 80px;
-  line-height: 80px;
-  font-size: 24px;
-  font-weight: 500;
-  color: #fde800;
-}
-</style>

src/views/megagame/topic/detailbzs3.vue

@@ -1,282 +0,0 @@
-/*bladesign*/
-<template>
-<div>
-  <div class="megagame">
-    <div class="img">
-      <img src="../../../assets/match/litibj.png"/></div>
-      <div  class="me_container clearfix">
-          <!-- 选项 -->
-       
-          <div class=" clearfix">
-          <div class="me_img"  @click="back">
-              <img src="../../../assets/match/r.png" alt="图片">
-          </div>
-          <div class='ne_top'>
-           <ul class="tabs">
-            <!-- <li
-              class="timu_title"
-              v-for="(item,index) in tabsParam"
-              :key="index"
-              @click="toggleTabs(index)"
-              :class="{active:index==nowIndex}"
-            >{{item}}</li> -->
-            <li  class="timu_title active">前沿-Bladesign-具有渐变截面特性及复合材料铺层结构的简化机翼受力分析</li>
-           
-           
-          </ul>   
-          </div>
-          </div>
-              <div  class="me_content clearfix">
-                       <div class="ju jux"><img src="../../../assets/match/jux.png" alt="图片"></div>
-                         <div class="ju jur"><img src="../../../assets/match/jux.png" alt="图片"></div>
-                  <div class="me_padding">
-                      <div class="me_contenttop">
-                        <div class="xq_contenttopleft">
-                           <p class="xq_title">计算目标:</p>
-                           <p class="xq_dec"> a)	根据给定模型参数，利用参数化建模功能建立目标机翼截面；<br>
-b)	对蒙皮各层材料按指定铺设方向进行铺层操作，设定材料参数；<br>
-c)	机翼截面由一端均匀过渡到另一端，分别对机翼两端截面进行VABS分析，获取截面刚度矩阵、质量矩阵、剪切中心；<br>
-d)	对末端受力的渐变截面机翼进行静力分析，获取等效应力云图，并绘制梁轴线各点Z向位移。
-                          </p>
-                        <div>
-                             <p class="xq_title">模型参数:</p>
-                             <p class="xq_dec">模模型内部加强梁和外部蒙皮结构采用不同的各向异性正交材料，相邻层按45°/-45°正交铺设，材料具体参数如简化机翼材料参数表所示。</p>
-                             <table class="xq_dec">
-                               <tr>
-                                 <td></td>
-                                <td>E1</td>
-                                <td>E2</td>
-                                <td>E3</td>
-                                <td>G12</td>
-                                <td>G23</td>
-                                <td>G31</td>
-                                <td>V12</td>
-                                <td>V23</td>
-                                <td>V31</td>
-                               </tr>
-                               <tr>
-                                <td>外部蒙皮</td>
-                                <td>136GPa</td>
-                                <td>9.04GPa</td>
-                                <td>9.04GPa</td>
-                                <td>3.87GPa</td>
-                                <td>3.87GPa</td>
-                                <td>3.87GPa</td>
-                                <td>0.34</td>
-                                <td>0.01</td>
-                                <td>0.01</td>
-                               </tr>
-                               <tr>
-                               <td>内部加强肋</td>
-                                <td>116GPa</td>
-                                <td>13.6GPa/td>
-                                <td>9.04GPa</td>
-                                <td>3.87GPa</td>
-                                <td>3.87GPa</td>
-                                <td>3.87GPa</td>
-                                <td>0.328</td>
-                                <td>0.01</td>
-                                <td>0.01</td>
-                               </tr>
-                             </table>
-                              
-
-                        </div>
-
-                        </div>
-                         <div class="xq_contenttopright">
-                             <p class=" color1" >相关资料</p>
-                        </div>
-                      </div>
-                     
-                  </div>
-                  
-
-              </div>
-      </div>
-
-      </div>
-  
-</div>
-</template>
-
-<script>
-import { request, getImage } from "@/utils/request";
-import { parseTime } from "@/utils/index";
-import store from "@/store"; // vue状态管理
-import { Message, MessageBox } from "element-ui"; // 引入Message、MessageBox
-export default {
-  name: "megagame",
-  components: {},
-  data() {
-    return {};
-  },
-  created() {},
-  mounted() {},
-  methods: {
-    back() {
-      this.$router.replace("/topic");
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import "@/styles/variables.scss";
-@import "@/styles/mixin.scss";
-.megagame {
-  font-family: "STHeitiSC-Light";
-  // @include w_h(100%, 100%);
-  @include w_h(100%);
-  // padding: 30px 60px;
-  background: #000;
-  overflow: hidden;
-  flex: 1;
-  position: relative;
-
-  .img {
-    // height: scal(100vh);
-    @include w_h(100%);
-    position: absolute;
-    z-index: 0;
-    bottom: -3px;
-    img {
-      @include w_h(100%);
-    }
-  }
-  .me_container {
-    max-width: 1200px;
-    margin: 3% auto;
-    margin-bottom: 12%;
-
-    .me_img {
-      float: left;
-    }
-    .ne_top {
-      padding-left: 100px;
-      ul {
-        display: flex;
-        justify-content: center;
-        align-content: center;
-        li {
-          font-size: 30px;
-          font-family: DFPLiJinHeiW8-GB;
-          font-weight: 600;
-          color: #ffffff;
-          line-height: 20px;
-          opacity: 0.5;
-          margin-right: 51px;
-        }
-        .active {
-          color: #007af9;
-          opacity: 1;
-        }
-      }
-    }
-    .me_content {
-      margin-top: 52px;
-      box-shadow: 0 0 24px 12px #007af9;
-      position: relative;
-      padding: 20px;
-      border-radius: 20px;
-      background-color: #001c50;
-      .me_padding {
-        box-shadow: 0 0 24px 12px #001c50;
-        background-color: #001c50;
-        padding: 25px;
-        .me_contenttop {
-          .xq_title {
-            height: 53px;
-            line-height: 53px;
-            font-size: 24px;
-            color: #fff;
-            font-weight: 500;
-          }
-          .xq_dec {
-            font-size: 18px;
-            color: #fff;
-            padding: 20px 0;
-          }
-        }
-      }
-      .ju {
-        position: absolute;
-        position: absolute;
-        top: -22px;
-      }
-      .jux {
-        left: 70px;
-      }
-      .jur {
-        right: 70px;
-      }
-    }
-    .me_contentbotton {
-      padding: 15px 43px 43px 43px;
-      background: rgba(255, 255, 255, 0.2);
-      color: #fff;
-      .contentbotton_top {
-        position: relative;
-        .contentbotton_get {
-          position: absolute;
-          right: 0;
-          top: 0;
-          color: #008dfa;
-          width: 68px;
-        }
-      }
-      li {
-        font-size: 16px;
-        padding: 30px 0 15px 0;
-        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
-        .explain {
-          display: inline-block;
-          white-space: nowrap;
-          width: 100%;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          padding: 15px 0;
-        }
-        .contentbotton_title {
-          font-size: 20px;
-        }
-      }
-    }
-  }
-}
-.xq_imgs {
-  width: 500px;
-  height: 300px;
-  overflow: hidden;
-  margin: 20px auto;
-}
-.xq_imgs img {
-  width: 100%;
-  height: 100%;
-}
-.tips {
-  font-size: 32px;
-  color: #fff;
-  text-align: center;
-}
-.footer {
-  background: #2b2828;
-}
-.me_contenttop {
-  display: flex;
-}
-.xq_contenttopleft {
-  width: 70%;
-  padding: 10px;
-}
-.xq_contenttopright {
-  width: 30%;
-}
-.color1 {
-  height: 80px;
-  line-height: 80px;
-  font-size: 24px;
-  font-weight: 500;
-  color: #fde800;
-}
-</style>

src/views/megagame/topic/detailbzs4.vue

@@ -1,296 +0,0 @@
-/*bladesign*/
-<template>
-<div>
-  <div class="megagame">
-    <div class="img">
-      <img src="../../../assets/match/litibj.png"/></div>
-      <div  class="me_container clearfix">
-          <!-- 选项 -->
-       
-          <div class=" clearfix">
-          <div class="me_img"  @click="back">
-              <img src="../../../assets/match/r.png" alt="图片">
-          </div>
-          <div class='ne_top'>
-           <ul class="tabs">
-            <!-- <li
-              class="timu_title"
-              v-for="(item,index) in tabsParam"
-              :key="index"
-              @click="toggleTabs(index)"
-              :class="{active:index==nowIndex}"
-            >{{item}}</li> -->
-            <li  class="timu_title active">前沿-Bladesign-弧形大梁简化机翼截面的多目标优化</li>
-           
-           
-          </ul>   
-          </div>
-          </div>
-              <div  class="me_content clearfix">
-                       <div class="ju jux"><img src="../../../assets/match/jux.png" alt="图片"></div>
-                         <div class="ju jur"><img src="../../../assets/match/jux.png" alt="图片"></div>
-                  <div class="me_padding">
-                      <div class="me_contenttop">
-                        <div class="xq_contenttopleft">
-                           <p class="xq_title">计算目标:</p>
-                           <p class="xq_dec">      a)  根据给定模型参数，利用参数化建模功能建立目标机翼截面；<br>
-b)  对蒙皮各层材料按指定铺设方向进行铺层操作，设定材料参数；<br>
-      c)   设定优化目标、约束条件、设计变量及优化算法优化机翼截面。
-
-                          </p>
-                        <div>
-                             <p class="xq_title">模型参数:</p>
-                             <p class="xq_dec">模型由蒙皮与加强肋混合制成。翼型轮廓为 SC1095，弦长为 0.53m。加
-强肋中点位置为距离前缘 20%弦长处。蒙皮分为 2 层，每层厚度 1mm。加强肋
-为 1 层，厚度为 8mm，加强层上下部分的相对位置均为 0.2，侧边曲率为 20。旋
-翼长度为 7m。几何模型如初始翼型截面所示
-</p>
-                              <div class="xq_imgs">
-                                <img 
-                                  src="../../../assets/match/bzs4_1.png"
-                                  alt="初始翼型截面"
-                                />
-                              </div>
-                            
-                            <p class="xq_dec">蒙皮由正交各向异性材料构成，铺设角为-45°/+45°，加强肋由各向同性材料构成。材料参数如下初始翼型材料参数表所示
-                            </p>
-                          
-                             <table class="xq_dec">
-                               <tr>
-                                 <td></td>
-                                <td>E1</td>
-                                <td>E2</td>
-                                <td>E3</td>
-                                <td>G12</td>
-                                <td>G23</td>
-                                <td>G31</td>
-                                <td>V12</td>
-                                <td>V23</td>
-                                <td>V31</td>
-                               </tr>
-                               <tr>
-                                <td>Skin Layers</td>
-                                <td>39GPa</td>
-                                <td>8.6GPa</td>
-                                <td>8.6GPa</td>
-                                <td>3.8GPa</td>
-                                <td>3.8GPa</td>
-                                <td>3.8GPa</td>
-                                <td>0.28</td>
-                                <td>0.28</td>
-                                <td>0.02</td>
-                               </tr>
-                               <tr>
-                               <td>Reinfocring Rib</td>
-                                <td>108GPa</td>
-                                <td></td>
-                                <td></td>
-                                <td></td>
-                                <td></td>
-                                <td></td>
-                                <td>0.3</td>
-                                <td></td>
-                                <td></td>
-                               </tr>
-                             </table>
-                              
-
-                        </div>
-
-                        </div>
-                         <div class="xq_contenttopright">
-                             <p class=" color1" >相关资料</p>
-                        </div>
-                      </div>
-                     
-                  </div>
-                  
-
-              </div>
-      </div>
-
-      </div>
-  
-</div>
-</template>
-
-<script>
-import { request, getImage } from "@/utils/request";
-import { parseTime } from "@/utils/index";
-import store from "@/store"; // vue状态管理
-import { Message, MessageBox } from "element-ui"; // 引入Message、MessageBox
-export default {
-  name: "megagame",
-  components: {},
-  data() {
-    return {};
-  },
-  created() {},
-  mounted() {},
-  methods: {
-    back() {
-      this.$router.replace("/topic");
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import "@/styles/variables.scss";
-@import "@/styles/mixin.scss";
-.megagame {
-  font-family: "STHeitiSC-Light";
-  // @include w_h(100%, 100%);
-  @include w_h(100%);
-  // padding: 30px 60px;
-  background: #000;
-  overflow: hidden;
-  flex: 1;
-  position: relative;
-
-  .img {
-    // height: scal(100vh);
-    @include w_h(100%);
-    position: absolute;
-    z-index: 0;
-    bottom: -3px;
-    img {
-      @include w_h(100%);
-    }
-  }
-  .me_container {
-    max-width: 1200px;
-    margin: 3% auto;
-    margin-bottom: 12%;
-
-    .me_img {
-      float: left;
-    }
-    .ne_top {
-      padding-left: 100px;
-      ul {
-        display: flex;
-        justify-content: center;
-        align-content: center;
-        li {
-          font-size: 30px;
-          font-family: DFPLiJinHeiW8-GB;
-          font-weight: 600;
-          color: #ffffff;
-          line-height: 20px;
-          opacity: 0.5;
-          margin-right: 51px;
-        }
-        .active {
-          color: #007af9;
-          opacity: 1;
-        }
-      }
-    }
-    .me_content {
-      margin-top: 52px;
-      box-shadow: 0 0 24px 12px #007af9;
-      position: relative;
-      padding: 20px;
-      border-radius: 20px;
-      background-color: #001c50;
-      .me_padding {
-        box-shadow: 0 0 24px 12px #001c50;
-        background-color: #001c50;
-        padding: 25px;
-        .me_contenttop {
-          .xq_title {
-            height: 53px;
-            line-height: 53px;
-            font-size: 24px;
-            color: #fff;
-            font-weight: 500;
-          }
-          .xq_dec {
-            font-size: 18px;
-            color: #fff;
-            padding: 20px 0;
-          }
-        }
-      }
-      .ju {
-        position: absolute;
-        position: absolute;
-        top: -22px;
-      }
-      .jux {
-        left: 70px;
-      }
-      .jur {
-        right: 70px;
-      }
-    }
-    .me_contentbotton {
-      padding: 15px 43px 43px 43px;
-      background: rgba(255, 255, 255, 0.2);
-      color: #fff;
-      .contentbotton_top {
-        position: relative;
-        .contentbotton_get {
-          position: absolute;
-          right: 0;
-          top: 0;
-          color: #008dfa;
-          width: 68px;
-        }
-      }
-      li {
-        font-size: 16px;
-        padding: 30px 0 15px 0;
-        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
-        .explain {
-          display: inline-block;
-          white-space: nowrap;
-          width: 100%;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          padding: 15px 0;
-        }
-        .contentbotton_title {
-          font-size: 20px;
-        }
-      }
-    }
-  }
-}
-.xq_imgs {
-  width: 500px;
-  height: 300px;
-  overflow: hidden;
-  margin: 20px auto;
-}
-.xq_imgs img {
-  width: 100%;
-  height: 100%;
-}
-.tips {
-  font-size: 32px;
-  color: #fff;
-  text-align: center;
-}
-.footer {
-  background: #2b2828;
-}
-.me_contenttop {
-  display: flex;
-}
-.xq_contenttopleft {
-  width: 70%;
-  padding: 10px;
-}
-.xq_contenttopright {
-  width: 30%;
-}
-.color1 {
-  height: 80px;
-  line-height: 80px;
-  font-size: 24px;
-  font-weight: 500;
-  color: #fde800;
-}
-</style>

src/views/megagame/topic/detailmw.vue

@@ -1,238 +0,0 @@
-/*hcfd*/
-<template>
-<div>
-  <div class="megagame">
-    <div class="img">
-      <img src="../../../assets/match/litibj.png"/></div>
-      <div  class="me_container clearfix">
-          <!-- 选项 -->
-       
-          <div class=" clearfix">
-          <div class="me_img"  @click="back">
-              <img src="../../../assets/match/r.png" alt="图片">
-          </div>
-          <div class='ne_top'>
-           <ul class="tabs">
-            <!-- <li
-              class="timu_title"
-              v-for="(item,index) in tabsParam"
-              :key="index"
-              @click="toggleTabs(index)"
-              :class="{active:index==nowIndex}"
-            >{{item}}</li> -->
-            <li  class="timu_title active">前沿-HCFDLab-Mavric Wing升阻力曲线分析</li>
-           
-           
-          </ul>   
-          </div>
-          </div>
-              <div  class="me_content clearfix">
-                       <div class="ju jux"><img src="../../../assets/match/jux.png" alt="图片"></div>
-                         <div class="ju jur"><img src="../../../assets/match/jux.png" alt="图片"></div>
-                  <div class="me_padding">
-                      <div class="me_contenttop">
-                        <div class="xq_contenttopleft">
-                           <p class="xq_title">目标:</p>
-                           <p class="xq_dec">Mavric薄翼型机翼在0.6马赫数下的升力阻力曲线。</p>
-                        <div>
-                             <p class="xq_title">模型参数:</p>
-                             <p class="xq_dec">由主办方提供。</p>
-                        </div>
-
-                        </div>
-                         <div class="xq_contenttopright">
-                             <p class=" color1" >相关资料</p>
-                        </div>
-                      </div>
-                     
-                  </div>
-                  
-
-              </div>
-      </div>
-
-      </div>
-  
-</div>
-</template>
-
-<script>
-import { request, getImage } from "@/utils/request";
-import { parseTime } from "@/utils/index";
-import store from "@/store"; // vue状态管理
-import { Message, MessageBox } from "element-ui"; // 引入Message、MessageBox
-export default {
-  name: "megagame",
-  components: {},
-  data() {
-    return {};
-  },
-  created() {},
-  mounted() {},
-  methods: {
-    back() {
-      this.$router.replace("/topic");
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import "@/styles/variables.scss";
-@import "@/styles/mixin.scss";
-.megagame {
-  font-family: "STHeitiSC-Light";
-  // @include w_h(100%, 100%);
-  @include w_h(100%);
-  // padding: 30px 60px;
-  background: #000;
-  overflow: hidden;
-  flex: 1;
-  position: relative;
-
-  .img {
-    // height: scal(100vh);
-    @include w_h(100%);
-    position: absolute;
-    z-index: 0;
-    bottom: -3px;
-    img {
-      @include w_h(100%);
-    }
-  }
-  .me_container {
-    max-width: 1200px;
-    margin: 3% auto;
-    margin-bottom: 12%;
-
-    .me_img {
-      float: left;
-    }
-    .ne_top {
-      padding-left: 100px;
-      ul {
-        display: flex;
-        justify-content: center;
-        align-content: center;
-        li {
-          font-size: 30px;
-          font-family: DFPLiJinHeiW8-GB;
-          font-weight: 600;
-          color: #ffffff;
-          line-height: 20px;
-          opacity: 0.5;
-          margin-right: 51px;
-        }
-        .active {
-          color: #007af9;
-          opacity: 1;
-        }
-      }
-    }
-    .me_content {
-      margin-top: 52px;
-      box-shadow: 0 0 24px 12px #007af9;
-      position: relative;
-      padding: 20px;
-      border-radius: 20px;
-      background-color: #001c50;
-      .me_padding {
-        box-shadow: 0 0 24px 12px #001c50;
-        background-color: #001c50;
-        padding: 25px;
-        .me_contenttop {
-          .xq_title {
-            height: 53px;
-            line-height: 53px;
-            font-size: 24px;
-            color: #fff;
-            font-weight: 500;
-          }
-          .xq_dec {
-            font-size: 18px;
-            color: #fff;
-            padding: 20px 0;
-          }
-        }
-      }
-      .ju {
-        position: absolute;
-        position: absolute;
-        top: -22px;
-      }
-      .jux {
-        left: 70px;
-      }
-      .jur {
-        right: 70px;
-      }
-    }
-    .me_contentbotton {
-      padding: 15px 43px 43px 43px;
-      background: rgba(255, 255, 255, 0.2);
-      color: #fff;
-      .contentbotton_top {
-        position: relative;
-        .contentbotton_get {
-          position: absolute;
-          right: 0;
-          top: 0;
-          color: #008dfa;
-          width: 68px;
-        }
-      }
-      li {
-        font-size: 16px;
-        padding: 30px 0 15px 0;
-        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
-        .explain {
-          display: inline-block;
-          white-space: nowrap;
-          width: 100%;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          padding: 15px 0;
-        }
-        .contentbotton_title {
-          font-size: 20px;
-        }
-      }
-    }
-  }
-}
-.xq_imgs {
-  width: 500px;
-  height: 300px;
-  overflow: hidden;
-  margin: 20px auto;
-}
-.xq_imgs img {
-  width: 100%;
-  height: 100%;
-}
-.tips {
-  font-size: 32px;
-  color: #fff;
-  text-align: center;
-}
-.footer {
-  background: #2b2828;
-}
-.me_contenttop {
-  display: flex;
-}
-.xq_contenttopleft {
-  width: 70%;
-  padding: 10px;
-}
-.xq_contenttopright {
-  width: 30%;
-}
-.color1 {
-  height: 80px;
-  line-height: 80px;
-  font-size: 24px;
-  font-weight: 500;
-  color: #fde800;
-}
-</style>

src/views/megagame/topic/details/detailafa.vue

@@ -0,0 +1,46 @@
+/*hcfd*/
+<template>
+  <DetailLayout :title="'前沿-HCFDLab-AFA飞机模型流场分析'">
+    <div class="detail">
+      <div class="content-left">
+        <p class="title">计算目标：</p>
+        <p class="dec">
+          计算0°迎角下，马赫数为0.95条件下AFA飞机的速度分布、压强分布、升力曲线及阻力曲线。
+        </p>
+        <div>
+          <p class="title">题目详细描述:</p>
+          <div class="imgs">
+            <img src="@/assets/match/afa1.png" alt="图片" />
+          </div>
+          <div class="imgs">
+            <img src="@/assets/match/afa2.jpg" alt="图片" />
+          </div>
+        </div>
+      </div>
+      <div class="content-right">
+        <p class="title">相关资料</p>
+      </div>
+    </div>
+  </DetailLayout>
+</template>
+
+<script>
+import DetailLayout from '../components/DetailLayout'
+export default {
+  name: 'Detailafa',
+  components: { DetailLayout },
+  data() {
+    return {}
+  },
+  created() {},
+  mounted() {},
+  methods: {},
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/variables.scss';
+@import '@/styles/mixin.scss';
+.detail {
+}
+</style>

src/views/megagame/topic/details/detailaw.vue

@@ -0,0 +1,106 @@
+/*hcfd*/
+<template>
+  <DetailLayout :title="'前沿-HCFDLab-Agard Wing升阻力曲线分析'">
+    <div class="detail">
+        <div class="content-left">
+          <p class="title">计算目标：</p>
+          <p class="dec">
+            Agard
+            445.6薄翼型机翼在0.678、0.901和1.141三个马赫数下的升力阻力曲线。
+          </p>
+          <div>
+            <p class="title">模型参数:</p>
+            <p class="dec">图1 Agard-wing 445.6的平面图</p>
+            <div class="imgs">
+              <img src="@/assets/match/Agard-wing1.png" alt="图片" />
+            </div>
+            <p class="dec">表 1 Agard-wing 445.6的几何尺寸</p>
+            <table border="0.1" class="dec">
+              <tr>
+                <td>Mass (kg)</td>
+                <td>2.3786</td>
+              </tr>
+              <tr>
+                <td>Root chord (m)</td>
+                <td>0.5587</td>
+              </tr>
+              <tr>
+                <td>RTip chord (m)</td>
+                <td>0.3687</td>
+              </tr>
+              <tr>
+                <td>Span (m)</td>
+                <td>0.762</td>
+              </tr>
+              <tr>
+                <td>Aera（m2)</td>
+                <td>0.3533</td>
+              </tr>
+              <tr>
+                <td>Section shape</td>
+                <td>NACA6A010</td>
+              </tr>
+              <tr>
+                <td>Sweepback (degree)</td>
+                <td>45</td>
+              </tr>
+            </table>
+
+            <p class="dec">表 2 不同飞行条件下的大气密度</p>
+            <table class="dec">
+              <tr>
+                <td>仿真条件</td>
+                <td>条件 1</td>
+                <td>条件 2</td>
+                <td>条件 3</td>
+              </tr>
+              <tr>
+                <td>马赫(Ma)</td>
+                <td>0.678</td>
+                <td>0.901</td>
+                <td>1.141</td>
+              </tr>
+              <tr>
+                <td>大气密度 (kg/m3)</td>
+                <td>0.20829</td>
+                <td>0.0995</td>
+                <td>0.07836</td>
+              </tr>
+            </table>
+            <p class="title">网格格式:</p>
+            <p class="dec">
+              非结构流体软件HCFDLab支持四面体、金字塔、三棱柱、六面体等多种网格类型，这种非结构化网格，无论气动外形复杂度有多高，都可以方便、快速地进行网格划分，并根据用户需要和实际外形特点对模型进行分块（part）。用网格生成软件（如ICEM或PointWise）划分好整个流场的网格后，导出
+              .ugrid 格式网格文件，HCFDLab可直接读入此类型的网格文件，在导出
+              .ugrid 格式网格文件时会同时生成 .dat
+              格式的边界文件，这两个文件一起构成非结构气弹模块流场分析准备文件。目前，HCFDLab只支持这一种网格文件类型。
+            </p>
+          </div>
+        </div>
+        <div class="content-right">
+          <p class="title">相关资料</p>
+        </div>
+      </div>
+    </div>
+  </DetailLayout>
+</template>
+
+<script>
+import DetailLayout from '../components/DetailLayout'
+export default {
+  name: 'Detailaw',
+  components: { DetailLayout },
+  data() {
+    return {}
+  },
+  created() {},
+  mounted() {},
+  methods: {},
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/variables.scss';
+@import '@/styles/mixin.scss';
+.detail {
+}
+</style>

src/views/megagame/topic/details/detailbyy.vue

@@ -0,0 +1,56 @@
+/*bladesign*/
+<template>
+  <DetailLayout :title="'前沿-Bladesign-矩形截面梁受力分析'">
+    <div class="detail">
+        <div class="content-left">
+          <p class="title">计算目标：</p>
+          <p class="dec">
+            本测试算例对末端受力的矩形截面悬臂梁进行静态分析，计算梁轴线上各点的位移
+          </p>
+          <div>
+            <p class="title">模型参数:</p>
+            <p class="dec">算例中矩形截面梁的几何模型如图所示。</p>
+            <div class="imgs">
+              <img src="@/assets/match/byy1.png" alt="图片" />
+            </div>
+            <p class="dec">
+              模型的截面为0.4m*0.2m的矩形，长5m。网格采用25mm*25mm的二次四边形面单元和100mm的beam单元。边界条件如图1
+              2所示，一端整个截面固定全部六个自由度，另一端几何中心点受力（Y=Z=0），大小为100kN，方向沿Z轴正向。
+            </p>
+            <div class="imgs">
+              <img src="@/assets/match/byy2.png" alt="图片" />
+            </div>
+            <p class="dec">
+              模型采用各向同性材料，弹性模量E=136GPa，泊松比v=0.34。
+            </p>
+          </div>
+        </div>
+        <div class="content-right">
+          <p class="title">相关资料</p>
+        </div>
+      </div>
+    </div>
+  </DetailLayout>
+</template>
+
+<script>
+import DetailLayout from '../components/DetailLayout'
+export default {
+  name: 'Detailbyy',
+  components: { DetailLayout },
+  data() {
+    return {}
+  },
+  created() {},
+  mounted() {},
+  methods: {},
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/variables.scss';
+@import '@/styles/mixin.scss';
+.detail {
+}
+</style>
+

src/views/megagame/topic/details/detailbzs1.vue

@@ -0,0 +1,59 @@
+/*bladesign*/
+<template>
+  <DetailLayout
+    :title="'前沿-Bladesign-X棱形截面悬臂梁的动态特性（模态、瞬态）分析'"
+  >
+    <div class="detail">
+        <div class="content-left">
+          <p class="title">计算目标：</p>
+          <p class="dec">
+            a) 对该梁截面进行VABS分析，获取截面刚度矩阵、质量矩阵、剪切中心；<br />
+            b) 对该悬臂梁进行模态分析，获取前10阶特征频率；<br />
+            c) 在该悬臂梁的自由端施加Z轴负向随时间变化的动载荷，分析其瞬态响应，并绘制梁自由端几何中心随时间的位移曲线。
+          </p>
+          <div>
+            <p class="title">模型参数：</p>
+            <p class="dec">
+              X棱形截面梁，各参数如下图1所示，梁长6000mm，瞬态分析中载荷大小为100N，时间变化函数为<img src="@/assets/details/bladesgin1-1.jpg" alt="1/2sin(3t)"/>，作用时间为0.1s。
+            </p>
+            <div class="imgs">
+              <img src="@/assets/details/bladesgin1-2.jpg" alt="图1 X棱形梁截面示意图"/>
+              <p>图1 X棱形梁截面示意图</p>
+            </div>
+            <p class="dec">
+              模型采用正交各向异性材料，材料具体参数如表1所示。
+            </p>
+            <div class="imgs">
+              <p>表1 梁材料参数表</p>
+              <img src="@/assets/details/bladesgin1-3.jpg" alt="表1 梁材料参数表"/>
+            </div>
+          </div>
+        </div>
+        <div class="content-right">
+          <p class="title">相关资料</p>
+        </div>
+      </div>
+    </div>
+  </DetailLayout>
+</template>
+
+<script>
+import DetailLayout from '../components/DetailLayout'
+export default {
+  name: 'Detailbzs1',
+  components: { DetailLayout },
+  data() {
+    return {}
+  },
+  created() {},
+  mounted() {},
+  methods: {},
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/variables.scss';
+@import '@/styles/mixin.scss';
+.detail {
+}
+</style>

src/views/megagame/topic/details/detailbzs2.vue

@@ -0,0 +1,83 @@
+/*bladesign*/
+<template>
+  <DetailLayout
+    :title="'前沿-Bladesign-考虑初始形变（预弯/预扭）的梯形截面梁受力分析'"
+  >
+    <div class="detail">
+      <div class="content-left">
+        <p class="title">计算目标：</p>
+        <p class="dec">
+          a)
+          对考虑初始弯曲形变的梯形截面梁进行VABS分析，获取截面刚度矩阵、质量矩阵、剪切中心；<br />
+          b)
+          对考虑初始弯曲形变的梯形截面悬臂梁进行静力分析，计算并绘制梁轴线上各点X轴和Z轴方向的位移。<br />
+          c)
+          对考虑初始扭转形变的梯形截面梁进行VABS分析，获取截面刚度矩阵、质量矩阵、剪切中心；<br />
+          d)
+          对考虑初始扭转形变的梯形截面悬臂梁进行静力分析，计算并绘制梁轴线上各点Z轴方向的位移。初始扭转变形曲率K1=0.001
+        </p>
+        <div>
+          <p class="title">模型参数:</p>
+          <p class="dec">
+            一梯形截面梁，上底为20mm，下底为40mm，高为20mm，梁的轴线为半径为1000mm的一段弧，长为261.799mm（x长为500mm，z轴长133.075mm），如图1所示。
+          </p>
+          <p class="dec">
+            梯形截面梁一端固定，另一端几何中心处受到大小为500N的力，方向朝Z轴负方向。
+          </p>
+          <div class="imgs">
+            <img
+              src="@/assets/details/bladesgin2-1.jpg"
+              alt="图1 梯形截面梁弯曲结构示意图"
+            />
+            <p>图1 梯形截面梁弯曲结构示意图</p>
+          </div>
+          <p class="dec">
+            初始扭转形变分析时，截面模型参数、梁长度与梁弯曲形变分析时一致，从固定端到自由端有16度转角的均匀过渡，如下图2所示。给定初始扭转变形曲率K1=0.001，一端固定，另一端几何中心点受一大小为500N，方向沿Z轴正向的集中力。
+          </p>
+          <div class="imgs">
+            <img
+              src="@/assets/details/bladesgin2-2.jpg"
+              alt="图2 梯形截面梁扭转结构示意图"
+            />
+            <p>图2 梯形截面梁扭转结构示意图</p>
+          </div>
+          <p class="dec">
+            模型材料均采用正交各向异性材料，材料具体参数如表1所示。
+          </p>
+          <div class="imgs">
+            <p>表1 梁材料参数表</p>
+            <img
+              src="@/assets/details/bladesgin2-3.jpg"
+              alt="表1 梁材料参数表"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="content-right">
+        <p class="title">相关资料</p>
+      </div>
+    </div>
+  </DetailLayout>
+</template>
+
+<script>
+import DetailLayout from '../components/DetailLayout'
+export default {
+  name: 'Detailbzs2',
+  components: { DetailLayout },
+  data() {
+    return {}
+  },
+  created() {},
+  mounted() {},
+  methods: {},
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/variables.scss';
+@import '@/styles/mixin.scss';
+
+.detail {
+}
+</style>

src/views/megagame/topic/details/detailbzs3.vue

@@ -0,0 +1,74 @@
+/*bladesign*/
+<template>
+  <DetailLayout
+    :title="'前沿-Bladesign-具有渐变截面特性及复合材料铺层结构的简化机翼受力分析'"
+  >
+    <div class="detail">
+      <div class="content-left">
+        <p class="title">计算目标：</p>
+        <p class="dec">
+          a) 根据给定模型参数，利用参数化建模功能建立目标机翼截面；<br />
+          b) 对蒙皮各层材料按指定铺设方向进行铺层操作，设定材料参数；<br />
+          c)
+          机翼截面由一端均匀过渡到另一端，分别对机翼两端截面进行VABS分析，获取截面刚度矩阵、质量矩阵、剪切中心；<br />
+          d)
+          对末端受力的渐变截面机翼进行静力分析，获取等效应力云图，并绘制梁轴线各点Z向位移。
+        </p>
+        <div>
+          <p class="title">模型参数:</p>
+          <p class="dec">
+            本模型由蒙皮与加强肋混合制成。固定端模型分为外部蒙皮和内部加强梁两部分。蒙皮采用
+            NACA1408 翼型，弦长200mm，两根加强肋在距离前缘 20%和
+            30%的长度处。蒙皮和加强梁均等分为6层，每层厚度为 0.5mm。简化机翼长
+            4000mm。另一端机翼截面在固定端截面的基础上缩放0.8，前缘与固定端截面对齐。
+          </p>
+          <p class="dec">
+            在自由端截面的前缘端点处（如图1所示）受到大小为 100N，方向沿
+            Y轴正向的集中载荷。
+          </p>
+          <div class="imgs">
+            <img
+              src="@/assets/details/bladesgin3-1.jpg"
+              alt="图1 渐变NACA1408 翼型结构示意图"
+            />
+            <p>图1 渐变NACA1408 翼型结构示意图</p>
+          </div>
+          <p class="dec">
+            模型内部加强梁和外部蒙皮结构采用不同的各向异性正交材料，相邻层按45°/-45°正交铺设，材料具体参数如表1所示。
+          </p>
+          <div class="imgs">
+            <p>表1 简化机翼材料参数表</p>
+            <img
+              src="@/assets/details/bladesgin3-2.jpg"
+              alt="表1 简化机翼材料参数表"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="content-right">
+        <p class="title">相关资料</p>
+      </div>
+    </div>
+  </DetailLayout>
+</template>
+
+<script>
+import DetailLayout from '../components/DetailLayout'
+export default {
+  name: 'Detailbzs3',
+  components: { DetailLayout },
+  data() {
+    return {}
+  },
+  created() {},
+  mounted() {},
+  methods: {},
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/variables.scss';
+@import '@/styles/mixin.scss';
+.detail {
+}
+</style>

src/views/megagame/topic/details/detailbzs4.vue

@@ -0,0 +1,95 @@
+/*bladesign*/
+<template>
+  <DetailLayout :title="'前沿-Bladesign-弧形大梁简化机翼截面的多目标优化'">
+    <div class="detail">
+        <div class="content-left">
+          <p class="title">计算目标：</p>
+          <p class="dec">
+            a) 根据给定模型参数，利用参数化建模功能建立目标机翼截面；<br />
+            b) 对蒙皮各层材料按指定铺设方向进行铺层操作，设定材料参数；<br />
+            c) 设定优化目标、约束条件、设计变量及优化算法优化机翼截面。
+          </p>
+          <div>
+            <p class="title">模型参数:</p>
+            <p class="dec">
+              模型由蒙皮与加强肋混合制成。翼型轮廓为 SC1095，弦长为 0.53m。加
+              强肋中点位置为距离前缘 20%弦长处。蒙皮分为 2 层，每层厚度
+              1mm。加强肋 为 1 层，厚度为 8mm，加强层上下部分的相对位置均为
+              0.2，侧边曲率为 20。旋 翼长度为 7m。几何模型如初始翼型截面所示
+            </p>
+            <div class="imgs">
+              <img src="@/assets/match/bzs4_1.png" alt="初始翼型截面" />
+            </div>
+
+            <p class="dec">
+              蒙皮由正交各向异性材料构成，铺设角为-45°/+45°，加强肋由各向同性材料构成。材料参数如下初始翼型材料参数表所示
+            </p>
+
+            <table class="dec">
+              <tr>
+                <td></td>
+                <td>E1</td>
+                <td>E2</td>
+                <td>E3</td>
+                <td>G12</td>
+                <td>G23</td>
+                <td>G31</td>
+                <td>V12</td>
+                <td>V23</td>
+                <td>V31</td>
+              </tr>
+              <tr>
+                <td>Skin Layers</td>
+                <td>39GPa</td>
+                <td>8.6GPa</td>
+                <td>8.6GPa</td>
+                <td>3.8GPa</td>
+                <td>3.8GPa</td>
+                <td>3.8GPa</td>
+                <td>0.28</td>
+                <td>0.28</td>
+                <td>0.02</td>
+              </tr>
+              <tr>
+                <td>Reinfocring Rib</td>
+                <td>108GPa</td>
+                <td></td>
+                <td></td>
+                <td></td>
+                <td></td>
+                <td></td>
+                <td>0.3</td>
+                <td></td>
+                <td></td>
+              </tr>
+            </table>
+          </div>
+        </div>
+        <div class="content-right">
+          <p class="title">相关资料</p>
+        </div>
+      </div>
+    </div>
+  </DetailLayout>
+</template>
+
+<script>
+import DetailLayout from '../components/DetailLayout'
+export default {
+  name: 'Detailbzs4',
+  components: { DetailLayout },
+  data() {
+    return {}
+  },
+  created() {},
+  mounted() {},
+  methods: {},
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/variables.scss';
+@import '@/styles/mixin.scss';
+.detail {
+}
+</style>

src/views/megagame/topic/details/detailmw.vue

@@ -0,0 +1,40 @@
+/*hcfd*/
+<template>
+  <DetailLayout :title="'前沿-HCFDLab-Mavric Wing升阻力曲线分析'">
+    <div class="detail">
+        <div class="content-left">
+          <p class="title">计算目标：</p>
+          <p class="dec">Mavric薄翼型机翼在0.6马赫数下的升力阻力曲线。</p>
+          <div>
+            <p class="title">模型参数:</p>
+            <p class="dec">由主办方提供。</p>
+          </div>
+        </div>
+        <div class="content-right">
+          <p class="title">相关资料</p>
+        </div>
+      </div>
+    </div>
+  </DetailLayout>
+</template>
+
+<script>
+import DetailLayout from '../components/DetailLayout'
+export default {
+  name: 'Detailmw',
+  components: { DetailLayout },
+  data() {
+    return {}
+  },
+  created() {},
+  mounted() {},
+  methods: {},
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/variables.scss';
+@import '@/styles/mixin.scss';
+.detail {
+}
+</style>

src/views/megagame/topic/details/detailsxq.vue

@@ -0,0 +1,47 @@
+/*hcfd*/
+<template>
+  <DetailLayout :title="'前沿-HCFDLab-风洞模型流场分析'">
+    <div class="detail">
+        <div class="content-left">
+          <p class="title">计算目标：</p>
+          <p class="dec">
+            分别计算迎角α=0°、10°，马赫数Ma=2.25下的风洞内飞机模型速度云图、压强云图、升力曲线及阻力曲线。
+          </p>
+          <div>
+            <p class="title">题目详细描述:</p>
+            <div class="imgs">
+              <img src="@/assets/match/hcfd1.png" alt="图片" />
+            </div>
+            <div class="imgs">
+              <img src="@/assets/match/hcfd2.png" alt="图片" />
+            </div>
+          </div>
+        </div>
+        <div class="content-right">
+          <p class="title">相关资料</p>
+        </div>
+      </div>
+    </div>
+  </DetailLayout>
+</template>
+
+<script>
+import DetailLayout from '../components/DetailLayout'
+export default {
+  name: 'Detailsxq',
+  components: { DetailLayout },
+  data() {
+    return {}
+  },
+  created() {},
+  mounted() {},
+  methods: {},
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/variables.scss';
+@import '@/styles/mixin.scss';
+.detail {
+}
+</style>

src/views/megagame/topic/detailsxq.vue

@@ -1,257 +0,0 @@
-/*hcfd*/
-<template>
-<div>
-  <div class="megagame">
-    <div class="img">
-      <img src="../../../assets/match/litibj.png"/></div>
-      <div  class="me_container clearfix">
-          <!-- 选项 -->
-       
-          <div class=" clearfix">
-          <div class="me_img"  @click="back">
-              <img src="../../../assets/match/r.png" alt="图片">
-          </div>
-          <div class='ne_top'>
-           <ul class="tabs">
-            <!-- <li
-              class="timu_title"
-              v-for="(item,index) in tabsParam"
-              :key="index"
-              @click="toggleTabs(index)"
-              :class="{active:index==nowIndex}"
-            >{{item}}</li> -->
-            <li  class="timu_title active">前沿-HCFDLab-风洞模型流场分析</li>
-           
-           
-          </ul>   
-          </div>
-          </div>
-              <div  class="me_content clearfix">
-                       <div class="ju jux"><img src="../../../assets/match/jux.png" alt="图片"></div>
-                         <div class="ju jur"><img src="../../../assets/match/jux.png" alt="图片"></div>
-                  <div class="me_padding">
-                      <div class="me_contenttop">
-                          <div class="xq_contenttopleft">
-                           <p class="xq_title">目标:</p>
-                           <p class="xq_dec">分别计算迎角α=0°、10°，马赫数Ma=2.25下的风洞内飞机模型速度云图、压强云图、升力曲线及阻力曲线。</p>
-                        <div>
-                             <p class="xq_title">题目详细描述:</p>
-                            <div class="xq_imgs"><img src="../../../assets/match/hcfd1.png" alt="图片"></div>
-                             <div class="xq_imgs"><img src="../../../assets/match/hcfd2.png" alt="图片"></div>
-                        </div>
-                        </div>
-                         <div class="xq_contenttopright">
-                             <p class=" color1" >相关资料</p>
-                        </div>
-                      </div>
-                     
-                  </div>
-                  
-
-              </div>
-      </div>
-
-      </div>
-  
-</div>
-</template>
-
-<script>
-import { request, getImage } from '@/utils/request'
-import { parseTime } from '@/utils/index'
-import store from '@/store' // vue状态管理
-import { Message, MessageBox } from 'element-ui' // 引入Message、MessageBox
-export default {
-  name: 'megagame',
-  components: {},
-  data() {
-    return {
-     
-      
- 
-    }
-  },
-  created() {
-
-  },
-  mounted(){
-    
-  },
-  methods: {
-  
-   back(){
-       this.$router.replace("/topic")
-   }
-     
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-@import '@/styles/variables.scss';
-@import '@/styles/mixin.scss';
-.megagame {
-  font-family: 'STHeitiSC-Light';
-  // @include w_h(100%, 100%);
-  @include w_h(100%);
-  // padding: 30px 60px;
-  background: #000;
-  overflow: hidden;
-  flex:1;
-  position: relative;
-  
-  .img{
-    // height: scal(100vh);
-      @include w_h(100%);
-      position: absolute;
-      z-index: 0;
-      bottom: -3px;
-      img{
-     @include w_h(100%);
-      }
-  }
-  .me_container{
-      max-width: 1200px;
-      margin:3% auto;
-      margin-bottom: 12%;
-
-      .me_img{
-             float: left;
-
-          }
-      .ne_top{
-         padding-left: 100px;
-          ul{
-              display: flex;
-          justify-content: center;
-          align-content: center;
-          li{
-              font-size: 30px;
-                font-family: DFPLiJinHeiW8-GB;
-                font-weight: 600;
-                color: #FFFFFF;
-                line-height: 20px;
-                opacity: 0.5;
-              margin-right: 51px;
-          }
-          .active{
-            color: #007AF9;
-               opacity: 1;
-          }
-          }
-      }
-      .me_content{
-          margin-top: 52px;
-               box-shadow: 0 0 24px 12px #007af9;
-              position: relative;
-              padding: 20px;
-              border-radius: 20px;
-              background-color: #001C50;
-            .me_padding{
-             box-shadow: 0 0 24px 12px #001C50;
-             background-color:#001C50 ;
-             padding:25px;
-            .me_contenttop{
-                .xq_title{
-                        height: 53px;
-                    line-height: 53px;
-                    font-size: 24px;
-                    color: #fff;
-                    font-weight: 500;
-                }
-                .xq_dec{
-                    font-size: 18px;
-                    color: #fff;
-                    padding: 20px 0;
-                }
-
-             }
-            
-      }
-    .ju{
-      position: absolute;
-     position: absolute;
-    top: -22px;
-  
-      }
-      .jux{
-     left: 70px;
-      }
-      .jur{
-        right: 70px;
-      }
-      }
-       .me_contentbotton{
-              padding: 15px 43px 43px 43px;
-               background:rgba(255,255,255,.2);
-               color: #fff;
-               .contentbotton_top{
-                 position: relative;
-                 .contentbotton_get{
-                   position: absolute;
-                   right: 0;
-                   top: 0;
-                   color: #008DFA;
-                  width: 68px;
-
-                 }
-               }
-               li{
-                   font-size: 16px;
-                  padding: 30px 0 15px 0;
-                 border-bottom: 1px solid rgba(255,255,255,.3);
-                 .explain{
-                    display: inline-block;
-                    white-space: nowrap; 
-                    width: 100%; 
-                    overflow: hidden;
-                    text-overflow:ellipsis;
-                    padding: 15px 0;
-                  
-                  
-                 }
-                   .contentbotton_title{
-                     font-size: 20px;
-                   }
-                
-               }
-                
-             }
-  }
-}
-.xq_imgs{
-    width: 500px;
-    height: 300px;
-    overflow: hidden;
-    margin: 20px auto;
-}
-.xq_imgs img{
-    width: 100%;
-    height: 100%;
-}
-.tips{
-  font-size: 32px;
-  color: #fff;
-  text-align: center;
-}
-.footer{
-        background: #2b2828;
-  }
-  .me_contenttop{
-          display: flex;
-  }
-  .xq_contenttopleft{
-      width: 70%;
-    padding: 10px;
-  }
-  .xq_contenttopright{
-      width: 30%;  
-  }
-  .color1{
-         height: 80px;
-        line-height: 80px;
-        font-size: 24px;
-        font-weight: 500;
-          color: #FDE800;
-  }
-</style>

src/views/megagame/topic/detailsxq/detailAFA.vue

@@ -1,257 +0,0 @@
-/*hcfd*/
-<template>
-<div>
-  <div class="megagame">
-    <div class="img">
-      <img src="@/assets/match/litibj.png"/></div>
-      <div  class="me_container clearfix">
-          <!-- 选项 -->
-       
-          <div class=" clearfix">
-          <div class="me_img"  @click="back">
-              <img src="@/assets/match/r.png" alt="图片">
-          </div>
-          <div class='ne_top'>
-           <ul class="tabs">
-            <!-- <li
-              class="timu_title"
-              v-for="(item,index) in tabsParam"
-              :key="index"
-              @click="toggleTabs(index)"
-              :class="{active:index==nowIndex}"
-            >{{item}}</li> -->
-            <li  class="timu_title active">前沿-HCFDLab-AFA飞机模型流场分析</li>
-           
-           
-          </ul>   
-          </div>
-          </div>
-              <div  class="me_content clearfix">
-                       <div class="ju jux"><img src="@/assets/match/jux.png" alt="图片"></div>
-                         <div class="ju jur"><img src="@/assets/match/jux.png" alt="图片"></div>
-                  <div class="me_padding">
-                      <div class="me_contenttop">
-                          <div class="xq_contenttopleft">
-                           <p class="xq_title">目标:</p>
-                           <p class="xq_dec">计算0°迎角下，马赫数为0.95条件下AFA飞机的速度分布、压强分布、升力曲线及阻力曲线。</p>
-                        <div>
-                             <p class="xq_title">题目详细描述:</p>
-                            <div class="xq_imgs"><img src="@/assets/match/afa1.png" alt="图片"></div>
-                             <div class="xq_imgs"><img src="@/assets/match/afa2.jpg" alt="图片"></div>
-                        </div>
-                        </div>
-                         <div class="xq_contenttopright">
-                             <p class=" color1" >相关资料</p>
-                        </div>
-                      </div>
-                     
-                  </div>
-                  
-
-              </div>
-      </div>
-
-      </div>
-  
-</div>
-</template>
-
-<script>
-import { request, getImage } from '@/utils/request'
-import { parseTime } from '@/utils/index'
-import store from '@/store' // vue状态管理
-import { Message, MessageBox } from 'element-ui' // 引入Message、MessageBox
-export default {
-  name: 'megagame',
-  components: {},
-  data() {
-    return {
-     
-      
- 
-    }
-  },
-  created() {
-
-  },
-  mounted(){
-    
-  },
-  methods: {
-  
-   back(){
-       this.$router.replace("/topic")
-   }
-     
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-@import '@/styles/variables.scss';
-@import '@/styles/mixin.scss';
-.megagame {
-  font-family: 'STHeitiSC-Light';
-  // @include w_h(100%, 100%);
-  @include w_h(100%);
-  // padding: 30px 60px;
-  background: #000;
-  overflow: hidden;
-  flex:1;
-  position: relative;
-  
-  .img{
-    // height: scal(100vh);
-      @include w_h(100%);
-      position: absolute;
-      z-index: 0;
-      bottom: -3px;
-      img{
-     @include w_h(100%);
-      }
-  }
-  .me_container{
-      max-width: 1200px;
-      margin:3% auto;
-      margin-bottom: 12%;
-
-      .me_img{
-             float: left;
-
-          }
-      .ne_top{
-         padding-left: 100px;
-          ul{
-              display: flex;
-          justify-content: center;
-          align-content: center;
-          li{
-              font-size: 30px;
-                font-family: DFPLiJinHeiW8-GB;
-                font-weight: 600;
-                color: #FFFFFF;
-                line-height: 20px;
-                opacity: 0.5;
-              margin-right: 51px;
-          }
-          .active{
-            color: #007AF9;
-               opacity: 1;
-          }
-          }
-      }
-      .me_content{
-          margin-top: 52px;
-               box-shadow: 0 0 24px 12px #007af9;
-              position: relative;
-              padding: 20px;
-              border-radius: 20px;
-              background-color: #001C50;
-            .me_padding{
-             box-shadow: 0 0 24px 12px #001C50;
-             background-color:#001C50 ;
-             padding:25px;
-            .me_contenttop{
-                .xq_title{
-                        height: 53px;
-                    line-height: 53px;
-                    font-size: 24px;
-                    color: #fff;
-                    font-weight: 500;
-                }
-                .xq_dec{
-                    font-size: 18px;
-                    color: #fff;
-                    padding: 20px 0;
-                }
-
-             }
-            
-      }
-    .ju{
-      position: absolute;
-     position: absolute;
-    top: -22px;
-  
-      }
-      .jux{
-     left: 70px;
-      }
-      .jur{
-        right: 70px;
-      }
-      }
-       .me_contentbotton{
-              padding: 15px 43px 43px 43px;
-               background:rgba(255,255,255,.2);
-               color: #fff;
-               .contentbotton_top{
-                 position: relative;
-                 .contentbotton_get{
-                   position: absolute;
-                   right: 0;
-                   top: 0;
-                   color: #008DFA;
-                  width: 68px;
-
-                 }
-               }
-               li{
-                   font-size: 16px;
-                  padding: 30px 0 15px 0;
-                 border-bottom: 1px solid rgba(255,255,255,.3);
-                 .explain{
-                    display: inline-block;
-                    white-space: nowrap; 
-                    width: 100%; 
-                    overflow: hidden;
-                    text-overflow:ellipsis;
-                    padding: 15px 0;
-                  
-                  
-                 }
-                   .contentbotton_title{
-                     font-size: 20px;
-                   }
-                
-               }
-                
-             }
-  }
-}
-.xq_imgs{
-    width: 500px;
-    height: 300px;
-    overflow: hidden;
-    margin: 20px auto;
-}
-.xq_imgs img{
-    width: 100%;
-    height: 100%;
-}
-.tips{
-  font-size: 32px;
-  color: #fff;
-  text-align: center;
-}
-.footer{
-        background: #2b2828;
-  }
-  .me_contenttop{
-          display: flex;
-  }
-  .xq_contenttopleft{
-      width: 70%;
-    padding: 10px;
-  }
-  .xq_contenttopright{
-      width: 30%;  
-  }
-  .color1{
-         height: 80px;
-        line-height: 80px;
-        font-size: 24px;
-        font-weight: 500;
-          color: #FDE800;
-  }
-</style>

src/views/megagame/topic/detailsxq/hcfd.vue

@@ -1,236 +0,0 @@
-/*topic*/
-<template>
-<div>
-  <div class="megagame">
-    <div class="img">
-      <img src="../../../assets/match/litibj.png"/></div>
-      <div  class="me_container clearfix">
-          <!-- 选项 -->
-       
-          <div class=" clearfix">
-          <div class="me_img"  @click="back">
-              <img src="../../../assets/match/r.png" alt="图片">
-          </div>
-          <div class='ne_top'>
-           <ul class="tabs">
-            <!-- <li
-              class="timu_title"
-              v-for="(item,index) in tabsParam"
-              :key="index"
-              @click="toggleTabs(index)"
-              :class="{active:index==nowIndex}"
-            >{{item}}</li> -->
-            <li  class="timu_title active">比赛题目领取</li>
-           
-           
-          </ul>   
-          </div>
-          </div>
-              <div  class="me_content clearfix">
-                       <div class="ju jux"><img src="../../../assets/match/jux.png" alt="图片"></div>
-                         <div class="ju jur"><img src="../../../assets/match/jux.png" alt="图片"></div>
-                  <div class="me_padding">
-                      <div class="me_contenttop">
-                        
-                         
-                      </div>
-                     
-                  </div>
-                  
-
-              </div>
-      </div>
-
-      </div>
-  
-</div>
-</template>
-
-<script>
-import { request, getImage } from '@/utils/request'
-import { parseTime } from '@/utils/index'
-import store from '@/store' // vue状态管理
-import { Message, MessageBox } from 'element-ui' // 引入Message、MessageBox
-export default {
-  name: 'megagame',
-  components: {hcfd},
-  data() {
-    return {
-     
-      
- 
-    }
-  },
-  created() {
-
-  },
-  mounted(){
-    
-  },
-  methods: {
-  
-   
-     
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-@import '@/styles/variables.scss';
-@import '@/styles/mixin.scss';
-.megagame {
-  font-family: 'STHeitiSC-Light';
-  // @include w_h(100%, 100%);
-  @include w_h(100%);
-  // padding: 30px 60px;
-  background: #000;
-  overflow: hidden;
-  flex:1;
-  position: relative;
-  
-  .img{
-    // height: scal(100vh);
-      @include w_h(100%);
-      position: absolute;
-      z-index: 0;
-      bottom: -3px;
-      img{
-     @include w_h(100%);
-      }
-  }
-  .me_container{
-      max-width: 1200px;
-      margin:3% auto;
-      margin-bottom: 12%;
-
-      .me_img{
-             float: left;
-
-          }
-      .ne_top{
-         padding-left: 100px;
-          ul{
-              display: flex;
-          justify-content: center;
-          align-content: center;
-          li{
-              font-size: 30px;
-                font-family: DFPLiJinHeiW8-GB;
-                font-weight: 600;
-                color: #FFFFFF;
-                line-height: 20px;
-                opacity: 0.5;
-              margin-right: 51px;
-          }
-          .active{
-            color: #007AF9;
-               opacity: 1;
-          }
-          }
-      }
-      .me_content{
-          margin-top: 52px;
-               box-shadow: 0 0 24px 12px #007af9;
-              position: relative;
-              padding: 20px;
-              border-radius: 20px;
-              background-color: #001C50;
-            .me_padding{
-             box-shadow: 0 0 24px 12px #001C50;
-             background-color:#001C50 ;
-             padding:25px;
-             .me_contenttopleft{
-                 color: #FDE800;
-                  line-height: 1.5;
-                  display: inline-table;
-                 .xz{
-                   font-size: 20px;
-                 }
-                 .tm{
-                   font-size: 16px;
-                   padding-left: 20px;
-                 }
-             }
-             .me_contenttopright{
-              float: right;
-               .contenttopright_btn{
-                 width: 100px;
-                  height: 40px;
-                  border: 1px solid #FFFFFF;
-                  border-radius: 20px;
-                  font-size: 16px;
-                font-family: Heiti SC;
-                color: #FFFFFF;
-                line-height: 40px;
-                text-align: center;
-                margin-right: 11px;
-                overflow: hidden;
-                display: inline-block;
-               }
-               .activebtn{
-                 background-color: #008DFA;
-                 border: none;
-               }
-
-             }
-      }
-    .ju{
-      position: absolute;
-     position: absolute;
-    top: -22px;
-  
-      }
-      .jux{
-     left: 70px;
-      }
-      .jur{
-        right: 70px;
-      }
-      }
-       .me_contentbotton{
-              padding: 15px 43px 43px 43px;
-               background:rgba(255,255,255,.2);
-               color: #fff;
-               .contentbotton_top{
-                 position: relative;
-                 .contentbotton_get{
-                   position: absolute;
-                   right: 0;
-                   top: 0;
-                   color: #008DFA;
-                  width: 68px;
-
-                 }
-               }
-               li{
-                   font-size: 16px;
-                  padding: 30px 0 15px 0;
-                 border-bottom: 1px solid rgba(255,255,255,.3);
-                 .explain{
-                    display: inline-block;
-                    white-space: nowrap; 
-                    width: 100%; 
-                    overflow: hidden;
-                    text-overflow:ellipsis;
-                    padding: 15px 0;
-                  
-                  
-                 }
-                   .contentbotton_title{
-                     font-size: 20px;
-                   }
-                
-               }
-                
-             }
-  }
-}
-.tips{
-  font-size: 32px;
-  color: #fff;
-  text-align: center;
-}
-.footer{
-        background: #2b2828;
-  }
-</style>

src/views/megagame/topic/index.vue

@@ -1,232 +1,201 @@
 /*topic*/
 <template>
-<div>
-  <div class="megagame">
-    <div class="img">
-      <img src="../../../assets/match/litibj.png"/></div>
-      <div  class="me_container clearfix">
-          <!-- 选项 -->
-       
-          <div class=" clearfix">
-          <div class="me_img"  @click="back">
-              <img src="../../../assets/match/r.png" alt="图片">
+  <DetailLayout :title="businessType == '1' ? '比赛题目领取' : '预演题目领取'">
+    <div class="topic">
+      <div class="content-top">
+        <div class="top-left">
+          <p><img src="@/assets/match/x.png" /> 请选择您的身份</p>
+          <span>根据您所选择的身份匹配不同难度的题目</span>
+        </div>
+        <div class="top-right">
+          <div
+            class="right-btn"
+            v-for="(item, index) in btnsel"
+            :key="index"
+            @click="togglebtn(index)"
+            :class="{ activebtn: index == newindex }"
+          >
+            {{ item.name }}
           </div>
-          <div class='ne_top'>
-           <ul class="tabs">
-            <!-- <li
-              class="timu_title"
-              v-for="(item,index) in tabsParam"
-              :key="index"
-              @click="toggleTabs(index)"
-              :class="{active:index==nowIndex}"
-            >{{item}}</li> -->
-             <li  class="timu_title active" v-if="businessType=='1'">比赛题目领取</li>
-            <li  class="timu_title active" v-else >预演题目领取</li>
-           
-          </ul>   
-          </div>
-          </div>
-              <div  class="me_content clearfix">
-                       <div class="ju jux"><img src="../../../assets/match/jux.png" alt="图片"></div>
-                         <div class="ju jur"><img src="../../../assets/match/jux.png" alt="图片"></div>
-                  <div class="me_padding">
-                      <div class="me_contenttop">
-                          <div class="me_contenttopleft">
-                              <p class="me_xz xz"><img src="../../../assets/match/x.png"/> 请选择您的身份</p>
-                              <p  class="me_xz tm">根据您所选择的身份匹配不同难度的题目</p>
-                          </div>
-                          <div class="me_contenttopright">
-                            <div class="contenttopright_btn"
-                              v-for="(item,index) in btnsel"
-                              :key="index"
-                              @click="togglebtn(index)"
-                              :class="{activebtn:index==newindex}" >{{item.name}}</div>
-                          </div>
-                      </div>
-                     
-                  </div>
-                    <div v-if="listli.length == 0" class="tips">暂无数据</div>
-                   <div v-else class="me_contentbotton">
-                        <ul>
-                          <li   v-for="(item,index) in listli" :key="index">
-                            <div class="contentbotton_top">
-                              <div @click="details(index,item.rank)">
-                              <span class="contentbotton_title">{{item.title}}</span>
-                                 <div class="explain">说明：{{item.content}}</div>
-                                 </div>
-                              <div class="contentbotton_get" v-if='nowIndex==0'>
-                               <div class="contentbotton_get" v-if="item.isJoin=='0'" @click="lingti(item.id)">领取题目</div>
-                                <div class="contentbotton_get" v-else @click="intoprojec(item.projectId)">进入项目</div>
-                                </div>
-                                <div class="contentbotton_get" v-else>
-                               <div class="contentbotton_get" v-if="item.isJoin=='0'" @click="lingti(item.id)">领取答题</div>
-                                <div class="contentbotton_get" v-else @click="intoprojec(item.projectId)">进入项目</div>
-                                </div>
-                            </div>
-                         
-                          </li>
-                        </ul>
-                      </div>
-
-              </div>
+        </div>
       </div>
 
+      <div v-if="listli.length == 0" class="tips">暂无数据</div>
+
+      <div v-else class="content-bottom">
+        <ul>
+          <li v-for="(item, index) in listli" :key="index">
+            <div class="desc">
+              <h3>{{ item.title }}</h3>
+              <div class="explain" @click="details(item.title)">
+                说明：{{ item.content }}
+              </div>
+            </div>
+            <div class="bottons" v-if="nowIndex == 0">
+              <div
+                class="botton"
+                v-if="item.isJoin == '0'"
+                @click="lingti(item.id)"
+              >
+                领取题目
+              </div>
+              <div
+                class="botton white"
+                v-else
+                @click="intoprojec(item.projectId)"
+              >
+                进入项目
+              </div>
+            </div>
+            <div class="bottons" v-else>
+              <div
+                class="botton"
+                v-if="item.isJoin == '0'"
+                @click="lingti(item.id)"
+              >
+                领取答题
+              </div>
+              <div
+                class="botton white"
+                v-else
+                @click="intoprojec(item.projectId)"
+              >
+                进入项目
+              </div>
+            </div>
+          </li>
+        </ul>
       </div>
-</div>
+    </div>
+  </DetailLayout>
 </template>
 
 <script>
-import { request, getImage } from '@/utils/request'
-import { parseTime } from '@/utils/index'
-import store from '@/store' // vue状态管理
-import { Message, MessageBox } from 'element-ui' // 引入Message、MessageBox
+import DetailLayout from './components/DetailLayout'
+import { request } from '@/utils/request'
+import { Message } from 'element-ui' // 引入Message、MessageBox
 export default {
-  name: 'megagame',
-  components: {},
+  name: 'Topic',
+  components: { DetailLayout },
   data() {
     return {
-        nowIndex:'0',
-        businessType:'',
-        megagameId:'',
-        newindex:0,
-      tabsParam: ["预演题目领取", "比赛题目领取"],
-      megagameId:'',
-      uid:'',
-      btnsel:[
-        {id:'1', name:"学生"},
-        {id:'2', name:"专业"}
-    ],
-    listli:[]
+      nowIndex: '0',
+      businessType: '',
+      megagameId: '',
+      newindex: 0,
+      tabsParam: ['预演题目领取', '比赛题目领取'],
+      megagameId: '',
+      uid: '',
+      btnsel: [
+        { id: '1', name: '学生' },
+        { id: '2', name: '专业' },
+      ],
+      listli: [],
     }
   },
   created() {
-   this.megagameId=sessionStorage.getItem('megagameId');
-    this.businessType=sessionStorage.getItem('businessType');
+    this.megagameId = sessionStorage.getItem('megagameId')
+    this.businessType = sessionStorage.getItem('businessType')
   },
-  mounted(){
-    console.log(this.megagameId);
-     // this.businessType=this.$route.query.id;
-        // this.megagameId=this.$route.query.megagameId;
-     
-    this.listlt(this.businessType,'1');
+  mounted() {
+    // this.businessType=this.$route.query.id;
+    // this.megagameId=this.$route.query.megagameId;
+    this.listlt(this.businessType, '1')
   },
   methods: {
-     back(){
-       console.log(1111);
-         this.$router.replace('/timeline');
-       // this.$router.go(-1);//返回上一层
+    back() {
+      this.$router.replace('/matchLayout/timeline')
     },
     // 调用领题列表
-    listlt(nowIndex,newindex){
-   
-   let tonewindex=nowIndex+'';
-   let tonowIndex=(nowIndex+1)+'';
-     const params = {
-            transCode: 'D00022',
-             megaganmeId:this.megagameId,
-             uid:store.getters.userId,
-             businessType:tonewindex,
-             rank:newindex
-          }
-          request(params)
-            .then((res) => {
-              console.log(res)
-              this.listli=res.rows;
-            })
-            .catch((err) => {})
-  
-
+    listlt(nowIndex, newindex) {
+      let tonewindex = nowIndex + ''
+      let tonowIndex = nowIndex + 1 + ''
+      const params = {
+        transCode: 'D00022',
+        megaganmeId: this.megagameId,
+        uid: this.$store.getters.userId,
+        businessType: tonewindex,
+        rank: newindex,
+      }
+      request(params)
+        .then((res) => {
+          this.listli = res.rows
+        })
+        .catch((err) => {})
     },
 
-    togglebtn(index){
-      this.newindex=index;
-       this.listlt(this.businessType,(this.newindex+1)+'');
+    togglebtn(index) {
+      this.newindex = index
+      this.listlt(this.businessType, this.newindex + 1 + '')
     },
     //领取题目
-    lingti(id){
-       const loading = this.$loading({
-            lock: true,//lock的修改符--默认是false
-            text: 'Loading',//显示在加载图标下方的加载文案
-            spinner: 'el-icon-loading',//自定义加载图标类名
-            background: 'rgba(0, 0, 0, 0.7)',//遮罩层颜色
-            target: document.querySelector('#table')//loadin覆盖的dom元素节点
-    });
-     const params = {
-            transCode: 'D00009',
-            questionId:id,// 每个题目的数据id
-            uid:store.getters.userId,
-          }
-          request(params)
-            .then((res) => {
-          setTimeout(() => {
-                loading.close();
-          }, 2000);
-            Message({
-                  message: '恭喜你，领取成功',
-                  type: 'success'
-                });
-          this.listlt(this.businessType,(this.newindex+1)+'');
-            })
-            .catch((err) => {})
+    lingti(id) {
+      const loading = this.$loading({
+        lock: true, //lock的修改符--默认是false
+        text: 'Loading', //显示在加载图标下方的加载文案
+        spinner: 'el-icon-loading', //自定义加载图标类名
+        background: 'rgba(0, 0, 0, 0.7)', //遮罩层颜色
+        target: document.querySelector('#table'), //loadin覆盖的dom元素节点
+      })
+      const params = {
+        transCode: 'D00009',
+        questionId: id, // 每个题目的数据id
+        uid: this.$store.getters.userId,
+      }
+      request(params)
+        .then((res) => {
+          loading.close()
+          this.$message.success('恭喜您，领取成功！')
+          this.listlt(this.businessType, this.newindex + 1 + '')
+        })
+        .catch((err) => {
+          loading.close()
+        })
     },
     // 点击进入详情页面
-    details(id,rank1){
-      if(this.businessType=='1'){//判断是是预演还是正式
-         if(rank1=="1"){//判断是专业还是学生
-        switch(id){
-        case 0:
-             this.$router.replace({
-                path: '/detailsxq' })
-                break;
-        case 1:
-         this.$router.replace({
-                path: '/detailaw' })
-                break;
-        case 2:
-         this.$router.replace({
-                path: '/detailbzs3'})
-                break;
-        case 3:
-         this.$router.replace({
-                path: '/detailbzs2'})
-                break;
-        case 4:
-         this.$router.replace({
-                path: '/detailbzs1'})
-                break;
-      }
-
-      }else{
-         switch(id){
-        case 0:
-            this.$router.replace({
-                path: '/detailafa' })
-                break
-        case 1:
-            this.$router.replace({
-                path: '/detailbzs4' })
-                break
-      }
-      }
-      }else{
-       
+    details(title) {
+      let path = ''
+      switch (title) {
+        case '前沿-HCFDLab-风洞模型流场分析':
+          path = 'detailsxq'
+          break
+        case '前沿-HCFDLab-Agard Wing升阻力曲线分析':
+          path = 'detailaw'
+          break
+        case '前沿-Bladesign-X棱形截面悬臂梁的动态特性（模态、瞬态）分析':
+          path = 'detailbzs1'
+          break
+        case '前沿-Bladesign-考虑初始形变（预弯/预扭）的梯形截面梁受力分析':
+          path = 'detailbzs2'
+          break
+        case '前沿-Bladesign-具有渐变截面特性及复合材料铺层结构的简化机翼受力分析':
+          path = 'detailbzs3'
+          break
+        case '前沿-Bladesign-弧形大梁简化机翼截面的多目标优化':
+          path = 'detailbzs4'
+          break
 
+        case '前沿-Bladesign-矩形截面梁受力分析':
+          path = 'detailbyy'
+          break
+        case '前沿-HCFDLab-Mavric Wing升阻力曲线分析':
+          path = 'detailmw'
+          break
+        case '前沿-HCFDLab-AFA飞机模型流场分析':
+          path = 'detailafa'
+          break
       }
-     
-      
-     
+      this.$router.push(path)
     },
     //点击进入项目
-    intoprojec(projectId){
-///userLayout/details
-      this.getDetails(projectId);
-           this.$router.replace({
-                path: '/userLayout/details',
-                query:{projectId:projectId},
-              })
-
+    intoprojec(projectId) {
+      this.getDetails(projectId)
+      this.$router.replace({
+        path: '/userLayout/details',
+        query: { projectId: projectId },
+      })
     },
-     getDetails(projectId) {
+    getDetails(projectId) {
       const params = {
         transCode: 'C00031',
         projectId: projectId,
@@ -244,159 +213,92 @@ export default {
 <style lang="scss" scoped>
 @import '@/styles/variables.scss';
 @import '@/styles/mixin.scss';
-.megagame {
-  font-family: 'STHeitiSC-Light';
-  // @include w_h(100%, 100%);
-  @include w_h(100%);
-  // padding: 30px 60px;
-  background: #000;
-  overflow: hidden;
-  flex:1;
-  position: relative;
-  
-  .img{
-    // height: scal(100vh);
-      @include w_h(100%);
-      position: absolute;
-      z-index: 0;
-      bottom: -3px;
-      img{
-     @include w_h(100%);
+.topic {
+  @include w_h();
+  font-size: 16px;
+  color: $color_f;
+  .content-top {
+    @include flex();
+    padding: 20px 0;
+    .top-left {
+      line-height: 1.5;
+      color: #fde800;
+      p {
+        font-size: 20px;
       }
-  }
-  .me_container{
-      max-width: 1200px;
-      margin:3% auto;
-      margin-bottom: 12%;
-
-      .me_img{
-             float: left;
-
-          }
-      .ne_top{
-         padding-left: 100px;
-          ul{
-              display: flex;
-          justify-content: center;
-          align-content: center;
-          li{
-              font-size: 30px;
-                font-family: DFPLiJinHeiW8-GB;
-                font-weight: 600;
-                color: #FFFFFF;
-                line-height: 20px;
-                opacity: 0.5;
-              margin-right: 51px;
-          }
-          .active{
-            color: #007AF9;
-               opacity: 1;
-          }
-          }
+      span {
+        padding-left: 22px;
       }
-      .me_content{
-          margin-top: 52px;
-               box-shadow: 0 0 24px 12px #007af9;
-              position: relative;
-              padding: 20px;
-              border-radius: 20px;
-              background-color: #001C50;
-            .me_padding{
-             box-shadow: 0 0 24px 12px #001C50;
-             background-color:#001C50 ;
-             padding:25px;
-             .me_contenttopleft{
-                 color: #FDE800;
-                  line-height: 1.5;
-                  display: inline-table;
-                 .xz{
-                   font-size: 20px;
-                 }
-                 .tm{
-                   font-size: 16px;
-                   padding-left: 20px;
-                 }
-             }
-             .me_contenttopright{
-              float: right;
-               .contenttopright_btn{
-                 width: 100px;
-                  height: 40px;
-                  border: 1px solid #FFFFFF;
-                  border-radius: 20px;
-                  font-size: 16px;
-                font-family: Heiti SC;
-                color: #FFFFFF;
-                line-height: 40px;
-                text-align: center;
-                margin-right: 11px;
-                overflow: hidden;
-                display: inline-block;
-               }
-               .activebtn{
-                 background-color: #008DFA;
-                 border: none;
-               }
-
-             }
+    }
+    .top-right {
+      @include w_h(220px);
+      @include flex();
+      text-align: center;
+      .right-btn {
+        @include w_h(100px, 40px);
+        line-height: 40px;
+        border: 1px solid $color_f;
+        border-radius: 20px;
+        overflow: hidden;
+        transition: all 0.3s;
+        &:hover {
+          cursor: pointer;
+          opacity: 0.8;
+        }
       }
-    .ju{
-      position: absolute;
-     position: absolute;
-    top: -22px;
-  
+      .activebtn {
+        background: #008dfa;
+        border: #008dfa;
       }
-      .jux{
-     left: 70px;
+    }
+  }
+  .tips {
+    font-size: 28px;
+    color: $color_f;
+    text-align: center;
+  }
+  .content-bottom {
+    padding: 10px 22px;
+    background: rgba(255, 255, 255, 0.2);
+    li {
+      @include flex();
+      padding: 20px 0;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+      .desc {
+        @include w_h(calc(100% - 100px));
+        .h3 {
+          font-size: 20px;
+        }
+        .explain {
+          @include w_h();
+          padding-top: 15px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          transition: all 0.3s;
+          &:hover {
+            cursor: pointer;
+            opacity: 0.8;
+          }
+        }
       }
-      .jur{
-        right: 70px;
+    }
+    .bottons {
+      @include w_h(100px);
+      @include flex(flex-end);
+      .botton {
+        @include w_h(68px);
+        color: #008dfa;
+        transition: all 0.3s;
+        &:hover {
+          cursor: pointer;
+          opacity: 0.8;
+        }
       }
+      .white {
+        color: $color_f;
       }
-       .me_contentbotton{
-              padding: 15px 43px 43px 43px;
-               background:rgba(255,255,255,.2);
-               color: #fff;
-               .contentbotton_top{
-                 position: relative;
-                 .contentbotton_get{
-                   position: absolute;
-                   right: 0;
-                   top: 0;
-                   color: #008DFA;
-                  width: 68px;
-
-                 }
-               }
-               li{
-                   font-size: 16px;
-                  padding: 30px 0 15px 0;
-                 border-bottom: 1px solid rgba(255,255,255,.3);
-                 .explain{
-                    display: inline-block;
-                    white-space: nowrap; 
-                    width: 100%; 
-                    overflow: hidden;
-                    text-overflow:ellipsis;
-                    padding: 15px 0;
-                  
-                  
-                 }
-                   .contentbotton_title{
-                     font-size: 20px;
-                   }
-                
-               }
-                
-             }
+    }
   }
 }
-.tips{
-  font-size: 32px;
-  color: #fff;
-  text-align: center;
-}
-.footer{
-        background: #2b2828;
-  }
-</style>
+</style>

vue.config.js

@@ -25,7 +25,7 @@ module.exports = {
         disableHostCheck: true,
         proxy: {
             '/api': {
-               target: 'http://192.168.0.43:8181/', // 测试服
+              target: 'http://192.168.0.43:8181/', // 测试服
                 // target: 'http://26t13m1315.wicp.vip:32471/cae/service/TransServlet/',//黄工接口调用地址
                 // target: 'http://192.168.0.42:8081/', // 亮哥
                 // target: 'http://192.168.0.15:8081/', // 喻泽