diff --git a/client/.env.development b/client/.env.development
index c5200d4..aacde3e 100644
--- a/client/.env.development
+++ b/client/.env.development
@@ -3,8 +3,8 @@ ENV = 'development'
 
 # base api
 #VUE_APP_BASE_API = 'http://10.0.11.127:8000/api'
-VUE_APP_BASE_API = 'http://127.0.0.1:8000/api'
-#VUE_APP_BASE_API = 'https://testsearch.ctc.ac.cn/api'
+#VUE_APP_BASE_API = 'http://127.0.0.1:8000/api'
+VUE_APP_BASE_API = 'https://testsearch.ctc.ac.cn/api'
                      
 #VUE_APP_BASE_API = 'http://47.95.0.242:9101/api'
 
diff --git a/client/src/views/testvideo/index.vue b/client/src/views/testvideo/index.vue
index 6fbd01b..6921c99 100644
--- a/client/src/views/testvideo/index.vue
+++ b/client/src/views/testvideo/index.vue
@@ -1,170 +1,171 @@
 <template>
-<el-container>
-  <el-header style="height: 80px;padding: 0">
-     <el-row class="biaotou">
-     <el-col :span="20" style="text-align:center;color:seashell;font-size:32px;line-height: 70px;" >
-         检验管理部培训视频
-  </el-col>
-
-</el-row> 
-
-
-  </el-header>
-   <el-main style="margin-top: 70px;">
-     <div style="margin:1% 12.5%;">
-    <div class="content" @click="clicknub">
-        <video :id="tcPlayerId" width="1000" height="500"   class="tencent-player" preload="auto" playsinline webkit-playsinline></video>
-   
-    </div>
-     <div  style="margin-top: 40px;">
-          <el-row :gutter="20">
-          <el-col >
-            <div style="margin-bottom: 6px">
-              <span class="term">视频名称：</span>
-              <span class="desc"> {{ video.name }}</span>
-            </div>
+  <el-container>
+    <el-header style="height: 80px;padding: 0">
+      <el-row class="biaotou">
+        <el-col :span="20" style="text-align:center;color:seashell;font-size:32px;line-height: 70px;">
+          {{ video.name }}
+        </el-col>
+      </el-row>
+    </el-header>
+    <el-main style="margin-top: 70px;">
+      <div style="margin:20px 12%;">
+        <div class="content" @click="clicknub">
+          <video
+            :id="tcPlayerId"
+            width="1000"
+            height="500"
+            class="tencent-player"
+            preload="auto"
+            playsinline
+            webkit-playsinline
+          >
+          </video>
+          <span id="userName">用户：{{userName}}</span>
+        </div>
+        <div class="videoDetailWrap">
+          <el-col class="firstLineDetail">
+            <div class="firstLineText">{{ video.name }}</div>
+            <el-button class="firstLineBtn" type="error" icon="el-icon-view">{{video.viewsp}}</el-button>
           </el-col>
-           </el-row> 
-          <el-row :gutter="20">
-             <el-col >
-            <div style="margin-bottom: 6px">
-              <span class="term">视频描述：</span>
-              <span class="desc"> {{ video.description }}</span>
-            </div>
-          </el-col>
-          </el-row>  
-           <el-row :gutter="20">
-             <el-col >
-            <div style="margin-bottom: 6px">
-              <span class="term">视频总播放量：</span>
-              <span class="desc"> {{ video.views }}</span>
-            </div>
-          </el-col>
-          </el-row>     
-
-    </div>
-    </div>
-    
-   </el-main>
-</el-container>
+          <div style="font-size: 15px">
+            <span>视频描述：{{ video.description }}</span>
+          </div>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
 </template>
-
 <script>
- import {getVideo,getMyView} from "@/api/video";
-function loadTcScript(cb) {
-    loadScript(cb, {
-        id: 'tcPlayerScriptId',
-        url: 'https://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.min.js',
-    });
-}
-function loadScript(cb, obj) {
-    if (document.getElementById(obj.id)) {
-        cb();
-    } else {
-        const script = document.createElement('script');
-        script.async = true;
-        script.src = obj.url;
-        script.id = obj.id;
-        script.onload = () => {
-            cb();
-        };
-        document.body.appendChild(script);
-    }
-}
-
-export default {
+  import {getVideo, getMyView, getVideoPlayCode} from "@/api/video";
+  export default {
     name: 'TencentPlayer',
     props: {
-        options: {
-            type: Object,
-            default() {
-                return {};
-            }
+      options: {
+        type: Object,
+        default() {
+          return {};
         }
+      }
     },
     data() {
-        return {
-            tcPlayerId : 'tcPlayer' + Date.now(),
-            player: null,
-            video:{id: 0},
-            description:'',
-            name:'',
-        };
+      return {
+        tcPlayerId: 'tcPlayer' + Date.now(),
+        player: null,
+        videoFileId: '',
+        videoAppId: '1253484223',
+        videoPsign: '',
+        video: {id: 0},
+        description: '',
+        name: '',
+        videoFileid:false,
+        userName:""
+      };
     },
-    watch: {
-        options: {
-            handler(newV, oldV) {
-                this.$nextTick(() => {
-                    this.loadJS();
-                });
-            },
-            immediate: true,
-            deep: true,
+    mounted(){
+      //debugger;
+      this.userName = this.$store.state.user.name;
+      if(this.player!==null){
+        this.player.null;
+      }
+      if(this.$route.params.id){
+        this.id = this.$route.params.id;
+        this.videoFileId = this.$route.params.fileid;
+        let videoId = sessionStorage.getItem('videoId');
+        let videoFileId = sessionStorage.getItem('videoFileId');
+        if(videoId){
+          sessionStorage.removeItem('videoId');
+          sessionStorage.setItem('videoId',this.$route.params.id);
+        }else{
+          sessionStorage.setItem('videoId',this.$route.params.id);
         }
+        if(videoFileId){
+          sessionStorage.removeItem('videoFileId');
+          sessionStorage.setItem('videoFileId',this.$route.params.fileid);
+        }else{
+          sessionStorage.setItem('videoFileId',this.$route.params.fileid);
+        }
+      }else{
+        this.id =  sessionStorage.getItem('videoId');
+        this.videoFileId = sessionStorage.getItem('videoFileId');
+      }
+      this.getPlayCode(this.videoFileId);
+      this.getVideo();
     },
-    created() {
-    this.id = this.$route.params.id;
-    this.fileid = this.$route.params.fileid;
-    this.getVideo();
-  },
+
     methods: {
-       getVideo(){
-             getVideo(this.id).then((response) => {
-          
-        if (response.data) {
-         
-          this.video= response.data;
-        }
-        this.listLoading = false;
-      });
-       },
-       //视频观看次数
-       clicknub()
-       {
-            getMyView(this.id).then((response) => {
-          
-      });
-       },
-        loadJS() {
-            if (window.TCPlayer) {
-                this.initVideo();
-            } else {
-                loadTcScript(() => {
-                    this.initVideo();
-                });
+      getVideo() {
+        getVideo(this.id).then((response) => {
+          if (response.data) {
+            this.video = response.data;
+          }
+          this.listLoading = false;
+        });
+      },
+      getPlayCode(id){
+        let that = this;
+        getVideoPlayCode(id).then(res=>{
+          if(res.data){
+            //debugger;
+            console.log(res.data);
+            that.videoFileid = true;
+            that.videoPsign = res.data.psign;
+            that.initVideo();
+          }
+        })
+      },
+      //视频观看次数
+      clicknub() {
+        debugger;
+        getMyView(this.id).then((response) => {});
+      },
+      initVideo() {
+        //debugger;
+        console.log(this.userName);
+        let that = this;
+        let text = "用户："+that.userName;
+        const playerParm = {
+          fileID: that.videoFileId,
+          appID: that.videoAppId,
+          psign: that.videoPsign,
+          plugins:{
+            DynamicWatermark: {
+              speed: 0.1,
+              content: text
             }
-        },
-        initVideo() {
-            const playerParm = {
-                fileID: this.fileid,
-                appID: '1253484223',
-                 plugins:{
-      ContinuePlay: { // 开启续播功能
-        // auto: true, //[可选] 是否在视频播放后自动续播
-        // text:'上次播放至 ', //[可选] 提示文案
-        // btnText: '恢复播放' //[可选] 按钮文案
-      },}
-               
-            };
-            setTimeout(() => {
-                if (!this.player) {
-                    this.player = TCPlayer(this.tcPlayerId, playerParm);
-                } else {
-                    this.player.loadVideoByID(playerParm);
-                }
-            });
+          }
+        };
+        /*
+        * plugins: {
+            ContinuePlay: { // 开启续播功能
+              // auto: true, //[可选] 是否在视频播放后自动续播
+              // text:'上次播放至 ', //[可选] 提示文案
+              // btnText: '恢复播放' //[可选] 按钮文案
+            },
+          }
+        * */
+        //debugger;
+        if (!that.player) {
+          that.player = window.TCPlayer(that.tcPlayerId, playerParm);
+          that.player.on('play', function(error) {
+            // 做一些处理
+            getMyView(that.id).then((response) => {});
+          });
+        } else {
+          that.player.loadVideoByID(playerParm);
         }
-        ,
-      
+      },
     },
-};
+    beforeDestroy () {
+      this.player.dispose()
+    }
+  };
 </script>
 <style lang="scss" scoped>
 
-@import url("https://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css");
+  @import url("https://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css");
+
+  .el-header, .el-footer {
 
-.el-header, .el-footer {
-   
     color: #333;
     text-align: center;
     line-height: 40px;
@@ -172,10 +173,51 @@ export default {
     width: 100%;
     z-index: 1010;
   }
-  .biaotou{
-    background: url(../../assets/year-100-bg.png) no-repeat 50%,linear-gradient(90deg,#e95353 50%,#bf2221 0);
+
+  .biaotou {
+    background: url(../../assets/year-100-bg.png) no-repeat 50%, linear-gradient(90deg, #e95353 50%, #bf2221 0);
     box-shadow: none;
     height: 72px;
-}
+  }
+  .content{
+    position: relative;
+  }
 
-</style>
\ No newline at end of file
+  #userName {
+    display: inline-block;
+    position: absolute;
+    top: 9px;
+    left: 70px;
+    font-size: 14px;
+    z-index: 10000;
+    color: #ffffff;
+    padding: 5px 12px;
+    background: rgba(0,0,0,.3);
+    border-radius: 15px;
+    box-shadow: 0 0 5px 1px #aba8a3;
+  }
+  .tencent-player{
+    width: 100%;
+  }
+  .videoDetailWrap{
+    margin-top: 20px;
+    font-family:'Microsoft Yahei'
+  }
+  .firstLineDetail{
+    margin-bottom: 6px;
+    display: flex;
+    justify-content: space-between
+  }
+  .firstLineText{
+    font-size: 16px;
+    font-weight: bold;
+  }
+  .firstLineBtn{
+    background:none;
+    font-size: 14px;
+    padding: 5px 10px;
+    color:#e74e4e;
+    border: 1px solid #e74e4e;
+    border-radius: 15px;
+  }
+</style>
diff --git a/client/src/views/testvideo/upload.vue b/client/src/views/testvideo/upload.vue
index 5ce160f..4ebbd41 100644
--- a/client/src/views/testvideo/upload.vue
+++ b/client/src/views/testvideo/upload.vue
@@ -23,25 +23,13 @@
         max-height="600"
       >
         <el-table-column type="index" width="50" />
-        <el-table-column label="名称">
-          <template slot-scope="scope">{{ scope.row.name }}</template>
-        </el-table-column>
-        <el-table-column label="描述">
-          <template slot-scope="scope">{{ scope.row.description }}</template>
-        </el-table-column>
+        <el-table-column label="名称" prop="name"></el-table-column>
+        <el-table-column label="描述" prop="description"></el-table-column>
         <el-table-column label="视频类别">
-          <template slot-scope="scope">{{ scope.row.category_name }}</template>
+          <template slot-scope="scope">{{ scope.row.category }}</template>
         </el-table-column>
-        <el-table-column label="创建时间">
-          <template slot-scope="scope">{{ scope.row.create_time }}</template>
-        </el-table-column>
-        <el-table-column label="视频地址">
-          <template slot-scope="scope">{{ scope.row.mediaurl }}</template>
-        </el-table-column>
-        <el-table-column label="封面地址">
-          <template slot-scope="scope">{{ scope.row.coverurl }}</template>
-        </el-table-column>
-
+        <el-table-column label="创建时间" prop="create_time"></el-table-column>
+        <el-table-column label="封面地址" prop="coverurl"></el-table-column>
         <el-table-column
           align="center"
           label="操作"
@@ -256,6 +244,10 @@ export default {
           { required: true, message: "请选择视频分类", trigger: "change" },
         ],
       },
+      typeList:{48:'政 策',61:'技术方法',49:'质 控',
+        50:'内 审', 51:'管 评',52:'人 员', 53:'设 备',
+        54:'方法的验证和确认',55:'测量不确定度',
+        56:'抽 样',57:'安全&风险',58:'管理体系'},
     };
   },
   computed: {},
@@ -276,14 +268,22 @@ export default {
         this.listLoading = false;
       });
     },
-    //视频类型
 
+    //视频类型
     getTypeAll() {
       getDictList({ type__code: "data_video" }).then((res) => {
         this.typeOptions = genTree(res.data);
       });
     },
 
+    //筛选
+    filterTag(value, row) {
+      debugger;
+      console.log(value)
+      console.log(row)
+      return row.category === value;
+    },
+
     /*弹出弹窗 */
     handleAddVideo() {
       this.VideoContent = Object.assign({}, defaultVideo);
@@ -483,4 +483,3 @@ export default {
 </style>
     
 
-    
\ No newline at end of file
diff --git a/client/src/views/testvideo/videolist.vue b/client/src/views/testvideo/videolist.vue
index 4847a87..39d0618 100644
--- a/client/src/views/testvideo/videolist.vue
+++ b/client/src/views/testvideo/videolist.vue
@@ -1,142 +1,192 @@
 <template>
-<el-container>
-  <el-header style="height: 80px;padding: 0;top:-0px">
-     <el-row class="biaotou">
-     <el-col :span="20" style="text-align:center;color:seashell;font-size:32px;line-height: 70px;" >
-         培训视频
-  </el-col>
-
-</el-row> 
-
-
-  </el-header>
-  <el-main style="max-height: 700px;">
-
-<el-row style="background-color: #f5f7fa;
-    position: fixed;width: 83%;z-index:1000;margin-top: -58px;
-">
-     <el-col style="width:120px;margin-top: 12px;">
-        <el-link :underline="false" @click="getList"><el-span class="mune">全部</el-span></el-link>
-  </el-col>
-  <el-col style="width:120px;margin-top: 12px;" v-for="o in typeOptions" :key="o">
-        <el-link :underline="false" @click="getListtype(o)"><el-span class="mune">{{o.name}}</el-span></el-link>
-  </el-col>
-</el-row>
-  <el-row  style="margin-top:50px;">
-  <el-col style="margin:0.5%;width: 19%;" v-for="o in videoList" :key="o">
-    <el-card :body-style="{ padding: '0px' }" shadow="always" class="cardDiv" >
-        <a @click="clickImg(o)">
-      <el-image :src="o.coverurl" style="width:100%;height: 250px;" ></el-image>
-      <div class="des"> <span>{{o.description}}</span></div>
-       </a>
-      <div style="padding: 14px;">
-        <div style="height:50px">
-        <span style="font-family: 'Helvetica Neue';color:#af4545;">{{o.name}}</span>
+  <el-container>
+    <el-header style="height: 80px;padding: 0;">
+      <el-row class="biaotou">
+        <el-col :span="20" class="redBgTitle">
+          培训视频
+        </el-col>
+      </el-row>
+    </el-header>
+    <el-main style="padding:20px 0;">
+      <el-row class="typesButtons">
+        <div style="width: fit-content;">
+          <el-col class="typeItemWrap"  style="width:100px;margin-top: 6px;">
+            <el-link :underline="false" @click="getList">
+              <span class="mune">全部</span>
+            </el-link>
+          </el-col>
+          <el-col
+            class="typeItemWrap"
+            style=""
+            v-for="o in typeOptions"
+            :key="o.id">
+            <el-link :underline="false" @click="getListtype(o)">
+              <span class="mune">{{o.name}}</span>
+            </el-link>
+          </el-col>
         </div>
-        <div class="bottom clearfix">
-            <el-row>
-                <el-col :span="12">
-          <el-button type="warning" style="border: none;float: left;padding: 2px;    color:#dcae07;
-    background-color: white;" icon="el-icon-s-custom">{{o.viewsp}}</el-button>
-           </el-col>
-            <el-col :span="12">
-          <el-button type="warning" style="border: none;float: right;padding: 2px;    color:#dcae07;
-    background-color: white;">{{ o.create_time.substring(0,10) }}</el-button>
-           </el-col>
-           </el-row>
-        </div>
-      </div>
-     
-    </el-card>
-  </el-col>
-</el-row>
-</el-main>
-</el-container>
+      </el-row>
+      <el-row id="videoListWrap" style="margin-top:50px;" :gutter="10">
+        <el-col :xs="12" :sm="8" :lg="6" :xl="4"  v-for="o in videoList" :key="o.id" style="margin-bottom: 10px">
+          <el-card :body-style="{ padding: '0px' }" shadow="always" class="cardDiv">
+            <a @click="clickImg(o)">
+              <el-image :src="o.coverurl" style="width:100%;height: 200px;"></el-image>
+              <div class="des"><span>{{o.description}}</span></div>
+            </a>
+            <div style="padding: 14px;">
+              <div style="height:50px">
+                <span style="font-family: 'Helvetica Neue';color:#af4545;">{{o.name}}</span>
+              </div>
+              <div class="bottom clearfix">
+                <el-row>
+                  <el-col :span="6">
+                    <el-button type="warning" style="border: none;float: left;padding: 2px;    color:#dcae07;background-color: white;" icon="el-icon-view">{{o.views}}
+                    </el-button>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-button type="warning" style="border: none;float: left;padding: 2px;    color:#dcae07;
+    background-color: white;" icon="el-icon-s-custom">{{o.viewsp}}
+                    </el-button>
+                  </el-col>
+                  <el-col :span="12">
+                    <el-button type="warning" style="border: none;float: right;padding: 2px;    color:#dcae07;
+    background-color: white;">{{ o.create_time.substring(0,10) }}
+                    </el-button>
+                  </el-col>
+                </el-row>
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </el-main>
+  </el-container>
 </template>
- <script type="text/javascript">
-    import {  getsignature,createVideo,getVideoList} from "@/api/video";
-    import { getDictList, getDictTypeList } from "@/api/dict";
-
-
-import { genTree } from "@/utils";
-
-
-
-export default {
-  components: { },
-   
- 
-   
-  data() {
-    return {
-    
-      videoList:"",
-      typeOptions:[],
-     
-    };
-  },
-  computed: {},
- 
-  created() {
-        
-    this.getList();
-       this.getTypeAll();
-
-  
-  },
-  methods: {
+<script type="text/javascript">
+  import {getsignature, createVideo, getVideoList} from "@/api/video";
+  import {getDictList, getDictTypeList} from "@/api/dict";
 
 
+  import {genTree} from "@/utils";
+  export default {
+    components: {},
+    data() {
+      return {
+        type:null,
+        videoList: "",
+        typeOptions: [],
+      };
+    },
+    computed: {},
+    created() {
+      /*this.getList();
+      this.getTypeAll();*/
+    },
+    mounted(){
+      let type = sessionStorage.getItem('videoType');
+      if(type){
+        this.type = type;
+        this.getTypeData();
+        this.getTypeAll();
+      }else{
+        this.getList();
+        this.getTypeAll();
+      }
+      let bigHeight = document.getElementsByClassName('app-main')[0].clientHeight;
+      let topHeight = document.getElementsByClassName('typesButtons')[0].clientHeight;
+      debugger;
+      console.log(topHeight)
+      debugger;
+      let domHeight = bigHeight-170-topHeight;
+      document.getElementById('videoListWrap').style.height = domHeight + 'px';
+      // document.getElementById('videoListWrap').style.paddingTop = topHeight + 'px';
+    },
+    methods: {
       //列表加载
-       getList() {
-      this.listLoading = true;
-      getVideoList({pageoff:true}).then((response) => {
-        if (response.data) {
-          this.videoList = response.data;
-        }
-        this.listLoading = false;
-      });
-    },
-    getListtype(a){
-      getVideoList({category:a.id,pageoff:true}).then((response) => {
-          
-        if (response.data) {
-          this.videoList = response.data;
-        }
-        this.listLoading = false;
-      });
-    },
-       //视频类型
-     
- getTypeAll() {
-      getDictList({ type__code: "data_video"}).then((res) => {
-        this.typeOptions = genTree(res.data);
-      });
-    },
+      getList() {
+        this.type = null;
+        this.listLoading = true;
+        getVideoList({pageoff: true}).then((response) => {
+          if (response.data) {
+            this.videoList = response.data;
+          }
+          this.listLoading = false;
+        });
+      },
 
-   
-    //跳转播放视频界面
-    clickImg(a){
-         this.$router.push({name: "Index", params: { fileid: a.fileid,id:a.id} })
-    }
-  
-     
-  },
-};
+      getListtype(a) {
+        this.type = a.id;
+        getVideoList({category: a.id, pageoff: true}).then((response) => {
+          if (response.data) {
+            this.videoList = response.data;
+          }
+          this.listLoading = false;
+        });
+      },
+
+      getTypeData(){
+        getVideoList({category: this.type, pageoff: true}).then((response) => {
+          if (response.data) {
+            this.videoList = response.data;
+          }
+          this.listLoading = false;
+        });
+      },
+      //视频类型
+      getTypeAll() {
+        getDictList({type__code: "data_video"}).then((res) => {
+          this.typeOptions = genTree(res.data);
+        });
+      },
+
+      //跳转播放视频界面
+      clickImg(a) {
+        debugger;
+        if(this.type!==null){
+          let type = sessionStorage.getItem('videoType');
+          if(type){
+            sessionStorage.removeItem('videoType');
+            sessionStorage.setItem('videoType',this.type);
+          }else{
+            sessionStorage.setItem('videoType',this.type);
+          }
+        }else{
+          sessionStorage.removeItem('videoType');
+        }
+        this.$router.push({name: "Index", params: {fileid: a.fileid, id: a.id}})
+      }
+    },
+  };
 
 
 </script>
- 
 
-  <style  lang="scss" scoped>
-  .navbar{
-     display: none;
-         position: fixed;
+
+<style lang="scss" scoped>
+  .typeItemWrap{
+    margin-top: 6px;
+    width:fit-content;
+    min-width:100px;
   }
-   
-  .el-col-offset-0{
+  .el-link.el-link--default{
+    margin-right: 10px!important;
+    margin-bottom: 0!important;
+  }
+  .typeItemWrap:last-child .el-link.el-link--default{
+    margin-bottom: 10px!important;
+  }
+  #videoListWrap{
+    overflow-y: scroll;
+  }
+  .navbar {
+    display: none;
+    position: fixed;
+  }
+
+  .el-col-offset-0 {
     margin-left: 50px;
   }
+
   .bottom {
     margin-top: 13px;
     line-height: 12px;
@@ -151,22 +201,24 @@ export default {
     width: 100%;
     display: block;
   }
-.biaotou{
-    background: url(../../assets/year-100-bg.png) no-repeat 50%,linear-gradient(90deg,#e95353 50%,#bf2221 0);
+
+  .biaotou {
+    background: url(../../assets/year-100-bg.png) no-repeat 50%, linear-gradient(90deg, #e95353 50%, #bf2221 0);
     box-shadow: none;
-    height: 72px;
-}
+    height: 70px;
+  }
+
   .clearfix:before,
   .clearfix:after {
-      display: table;
-      content: "";
+    display: table;
+    content: "";
   }
-  
+
   .clearfix:after {
-      clear: both
+    clear: both
   }
+
   .el-header, .el-footer {
-   
     color: #333;
     text-align: center;
     line-height: 40px;
@@ -174,34 +226,57 @@ export default {
     width: 100%;
     z-index: 1010;
   }
-  
+
+  .redBgTitle {
+    text-align: center;
+    color: seashell;
+    font-size: 32px;
+    line-height: 70px;
+  }
+
   .el-aside {
     background-color: #D3DCE6;
     color: #333;
     text-align: center;
     line-height: 200px;
   }
-  
+
   .el-main {
     background-color: #ffffff;
     color: #333;
     text-align: center;
-    margin-top: 60px;
-   
+    margin-top: 130px;
+
   }
-  .des{
-      height: 100px; margin-top: -100px;z-index:9999;position: relative;background-color:rgba(220,38,38,0.2);color: #f5f4f4;
-      opacity: 0;
+
+  .typesButtons {
+    position: fixed;
+    /*width: 83%;*/
+    z-index: 1000;
+    margin-top: -80px;
+    background-color: rgb(245, 247, 250);
   }
-  .cardDiv:hover .des{    
-            opacity: 1;  
-        } 
+
+  .des {
+    height: 100px;
+    margin-top: -100px;
+    z-index: 9999;
+    position: relative;
+    background-color: rgba(220, 38, 38, 0.2);
+    color: #f5f4f4;
+    opacity: 0;
+  }
+
+  .cardDiv:hover .des {
+    opacity: 1;
+  }
+
   body > .el-container {
     margin-bottom: 40px;
   }
- 
-  .mune{
-      font-family: PingFang SC,DFPKingGothicGB-Medium,sans-serif;
+
+  .mune {
+    font-family: PingFang SC, DFPKingGothicGB-Medium, sans-serif;
     font-size: 16px;
     font-weight: 500;
     line-height: 24px;
@@ -210,10 +285,11 @@ export default {
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+
   .el-link.el-link--default {
     color: seashell;
     background: #fff;
-    border: 1px solid rgba(0,0,0,.1);
+    border: 1px solid rgba(0, 0, 0, .1);
     border-radius: 100px;
     color: rgba(131, 24, 24, 0.9);
     cursor: pointer;
@@ -224,6 +300,6 @@ export default {
     margin-bottom: 12px;
     margin-right: 16px;
 
-}
+  }
 
-</style>
\ No newline at end of file
+</style>