改善 SideVideoCard.vue 的响应式布局

src/components/card/SideVideoCard.vue

@@ -2,7 +2,7 @@
   <el-col style="padding-right: 7px; padding-left: 7px">
     <div style="cursor: pointer" :title="video.title">
       <el-card :body-style="{ padding: '0px' }" class="card">
-        <el-col :md="8">
+        <el-col :md="8" :sm="8" :xs="8">
           <router-link target="_blank" :to="`/video/${video.videoId}`">
             <div class="imgs">
               <el-image
@@ -19,25 +19,25 @@
             </div>
           </router-link>
         </el-col>
-        <el-col :md="16">
-          <div style="padding: 14px">
+        <el-col :md="16" :sm="16" :xs="16">
+          <div style="padding: 4px">
             <router-link style="text-decoration-line: none" target="_blank" :to="`/video/${video.videoId}`">
               <span style="left: 0;margin-bottom: 0px;color: black;">{{ video.title | ellipsis }}</span>
             </router-link>
           </div>
-          <div style="padding: 14px">
+          <div style="padding: 4px">
             <span style="left: 0;margin-bottom: 0px;color: black;">
               <router-link style="text-decoration-line: none" target="_blank" :to="`/user/${video.user.userId}`">
                 <i class="el-icon-user"> {{ video.user.screenName | ellipsisUsername }} </i></router-link>
             </span>
           </div>
-          <div style="padding: 14px">
-            <el-col :md="6">
+          <div style="padding: 4px">
+            <el-col :md="8" :sm="8" :xs="8">
               <span class="el-icon-video-play" style="left: 0;margin-bottom: 0px;color: black;">
                 {{ video.view }}
               </span>
             </el-col>
-            <el-col :md="6">
+            <el-col :md="8" :sm="8" :xs="8">
               <span class="el-icon-s-comment" style="left: 0;margin-bottom: 0px;color: black;">
                 {{ video.comment }}
               </span>