images rename

src/views/hall/Hall.vue

@@ -10,13 +10,13 @@
       <div class="btn-room">
         <ul>
           <li>
-            <img class="match" width="180px" src="@/assets/images/btn_match_room.png" @click="match">
+            <img class="match" width="180px" src="@/assets/images/button/match_room.png" @click="match">
           </li>
           <li>
-            <img width="180px" src="@/assets/images/btn_create_room.png" @click="createVisible=true">
+            <img width="180px" src="@/assets/images/button/create_room.png" @click="createVisible=true">
           </li>
           <li>
-            <img width="180px" src="@/assets/images/btn_enter_room.png" @click="enterVisible=true">
+            <img width="180px" src="@/assets/images/button/enter_room.png" @click="enterVisible=true">
           </li>
         </ul>
       </div>

src/views/room/Action.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="container">
     <div v-show="!startState">
-      <img v-if="!isreadyMe" width="100px" src="@/assets/images/btn_start.png" @click="action('ready')">
+      <img v-if="!isreadyMe" width="100px" src="@/assets/images/button/start.png" @click="action('ready')">
     </div>
     <div v-show="startState && isCanPlay && curUser === 'mine'">
-      <img width="100px" src="@/assets/images/btn_pass.png" @click="action('pass')">
-      <img width="100px" src="@/assets/images/btn_tip.png">
-      <img width="100px" src="@/assets/images/btn_play.png" @click="play">
+      <img width="100px" src="@/assets/images/button/pass.png" @click="action('pass')">
+      <img width="100px" src="@/assets/images/button/tip.png">
+      <img width="100px" src="@/assets/images/button/play.png" @click="play">
     </div>
     <div v-show="showCall">
       <el-button type="success" round @click="action('call', 0)">不叫</el-button>

src/views/room/Room.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <el-container>
-      <el-header height="10vh">
+      <el-header height="120px">
         <Header :landlord-cards="landlordCards" />
       </el-header>
       <el-container>
@@ -39,8 +39,19 @@
           </div>
         </el-aside>
       </el-container>
-      <el-footer height="30vh">
-        <el-row>
+      <el-footer height="240px">
+        <div>
+          <div class="hand-card-mine">
+            <div class="user-mine">
+              <HandCard ref="handCard" :room-no="roomNo" :hand-cards="cardsMine" direction="mine" :open="true" size="big" />
+            </div>
+          </div>
+          <!-- <div class="user-right">
+            <user ref="user" :alarm-num="alarm['mine']" direction="mine" />
+          </div> -->
+          <div class="coin">123</div>
+        </div>
+        <!-- <el-row>
           <el-col :span="4">
             <user ref="user" :alarm-num="alarm['mine']" direction="mine" />
           </el-col>
@@ -64,7 +75,7 @@
               </el-col>
             </el-row>
           </el-col>
-        </el-row>
+        </el-row> -->
       </el-footer>
     </el-container>
     <fade :special-type="specialType" :special="special" />
@@ -77,7 +88,7 @@ import User from './User'
 import HandCard from './HandCard'
 import Header from './Header'
 import OutCard from './OutCard'
-import Action from './Action'
+// import Action from './Action'
 import Fade from './Fade'
 import Setting from './Setting'
 import poker from '@/utils/poker'
@@ -89,14 +100,18 @@ export default {
     Header,
     HandCard,
     OutCard,
-    Action,
+    // Action,
     Setting,
     Fade
   },
   data() {
     return {
       curCard: [],
-      cardsMine: [],
+      cardsMine: [
+        { label: '2', type: 'diamond', checked: false },
+        { label: '2', type: 'diamond', checked: false },
+        { label: '2', type: 'diamond', checked: false }
+      ],
       cardsLeft: [],
       cardsRight: [],
       outcardMine: [],
@@ -437,7 +452,7 @@ export default {
 }
 </script>
 
-<style  scoped>
+<style scoped lang="scss">
 .container {
   -moz-user-select: none;
   -o-user-select:none;
@@ -465,7 +480,7 @@ export default {
   background-color: #E9EEF3;
   color: #333;
   text-align: center;
-  height: 60vh;
+  height: calc(100vh - 360px);
 }
 .left-tip {
   top: 30%;
@@ -518,4 +533,17 @@ export default {
 .user-right {
   float: left;
 }
+.user-mine {
+  float: left;
+}
+.hand-card-mine {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-bottom: 15px;
+}
+.coin {
+  height: 40px;
+  background: skyblue;
+}
 </style>

src/views/room/User.vue

@@ -6,12 +6,12 @@
         <img width="56px" src="@/assets/images/alarm-clock.png">
       </div>
       <div v-if="!startState" class="ready">
-        <img v-if="isready" width="80px" src="@/assets/images/btn_readied.png">
+        <img v-if="isready" width="80px" src="@/assets/images/button/readied.png">
       </div>
-      <div class="nickname">昵称:{{ nickname }}</div>
       <div class="header-img">
-        <img src="@/assets/images/default.jpg">
+        <img src="@/assets/images/avatar/1.png">
       </div>
+      <div class="nickname">昵称:{{ nickname }}</div>
     </div>
   </div>
 </template>
@@ -64,16 +64,15 @@ export default {
   justify-content:center;
   align-items: center;
   .uinfo {
-    padding-top: 20px;
+    // padding-top: 20px;
     .nickname {
-      padding-bottom: 10px;
+      // padding-bottom: 10px;
       color: rgb(39, 38, 38);
     }
     .header-img {
       img {
         width: 80px;
         height: 80px;
-        border-radius: 50%;
       }
     }
   }

src/views/user/Login.vue

@@ -5,7 +5,7 @@
     </div>
     <div class="bottom-box">
       <div @click="openLogin=true">
-        <img width="150px" src="@/assets/images/btn_ traveler.png" alt="">
+        <img width="150px" src="@/assets/images/button/traveler.png" alt="">
       </div>
     </div>
     <el-dialog :visible.sync="openLogin" :close-on-click-modal="false" width="400px">