アーカイブ詳細 ルーム遷移ボタン追加

public/css/chat.css

@@ -1295,6 +1295,7 @@ input:checked + .tab_class + .content_class {
   overflow-y: scroll;
   overflow-y: scroll;
   height: calc(100vh - 195px);
   height: calc(100vh - 195px);
 }
 }
+
 .arhive_img .img_wrap {
 .arhive_img .img_wrap {
   width: 50px;
   width: 50px;
   height: 50px;
   height: 50px;
@@ -1302,34 +1303,43 @@ input:checked + .tab_class + .content_class {
   text-align: center;
   text-align: center;
   line-height: 46px;
   line-height: 46px;
 }
 }
+
 .arhive_img img {
 .arhive_img img {
   width: 40px;
   width: 40px;
   height: 40px;
   height: 40px;
 }
 }
+
 .archive_list ul li {
 .archive_list ul li {
   list-style: none;
   list-style: none;
   border-bottom: 1px solid #e2e8f0;
   border-bottom: 1px solid #e2e8f0;
   position: relative;
   position: relative;
 }
 }
+
 .archive_row {
 .archive_row {
   padding: 10px;
   padding: 10px;
   color: #323743;
   color: #323743;
 }
 }
+
 .archive_row:hover {
 .archive_row:hover {
   background: aliceblue;
   background: aliceblue;
 }
 }
+
 .bg_blue {
 .bg_blue {
   background: #0070ca;
   background: #0070ca;
 }
 }
+
 .bg_green {
 .bg_green {
   background: #4dca00;
   background: #4dca00;
 }
 }
+
 .bg_orange {
 .bg_orange {
   background: #ca6d00;
   background: #ca6d00;
 }
 }
+
 .archive_list ul li:first-child {
 .archive_list ul li:first-child {
   border-top: 1px solid #e2e8f0;
   border-top: 1px solid #e2e8f0;
 }
 }
+
 .archive_desc {
 .archive_desc {
   padding-left: 10px;
   padding-left: 10px;
   position: relative;
   position: relative;
@@ -1337,15 +1347,18 @@ input:checked + .tab_class + .content_class {
   overflow: hidden;
   overflow: hidden;
   white-space: nowrap;
   white-space: nowrap;
 }
 }
+
 .archive_date span {
 .archive_date span {
   color: #323743;
   color: #323743;
   font-size: 14px;
   font-size: 14px;
 }
 }
+
 .archive_name span {
 .archive_name span {
   color: #323743;
   color: #323743;
   font-size: 16px;
   font-size: 16px;
   font-weight: 500;
   font-weight: 500;
 }
 }
+
 .archive_name {
 .archive_name {
   white-space: nowrap;
   white-space: nowrap;
   overflow: hidden;
   overflow: hidden;
@@ -1357,25 +1370,31 @@ input:checked + .tab_class + .content_class {
   font-size: 18px;
   font-size: 18px;
   font-weight: bold;
   font-weight: bold;
 }
 }
+
 .archive_detail .item {
 .archive_detail .item {
   margin-bottom: 20px;
   margin-bottom: 20px;
 }
 }
-.archive_detail .archive_detail_desc img {
+
+.archive_detail .archive_detail_desc img, .attendUser img {
   width: 80px;
   width: 80px;
   height: 80px;
   height: 80px;
   border-radius: 50%;
   border-radius: 50%;
 }
 }
+
 .archive_detail .archive_detail_desc .archive_detail_user_list ul {
 .archive_detail .archive_detail_desc .archive_detail_user_list ul {
   padding-left: 0;
   padding-left: 0;
   overflow-x: scroll;
   overflow-x: scroll;
 }
 }
+
 .archive_detail .archive_detail_desc .archive_detail_user_list ul li {
 .archive_detail .archive_detail_desc .archive_detail_user_list ul li {
   list-style: none;
   list-style: none;
   margin: 0 5px;
   margin: 0 5px;
 }
 }
+
 .archive_detail_desc {
 .archive_detail_desc {
   margin: 0 10px;
   margin: 0 10px;
 }
 }
+
 .archive_detail .archive_detail_desc .archive_detail_user_list span,
 .archive_detail .archive_detail_desc .archive_detail_user_list span,
 .archive_detail .archive_detail_desc .archive_detail_sv_user span {
 .archive_detail .archive_detail_desc .archive_detail_sv_user span {
   text-align: center;
   text-align: center;
@@ -1385,6 +1404,19 @@ input:checked + .tab_class + .content_class {
   width: 90px;
   width: 90px;
 }
 }
 
 
+#joinChatRoom {
+  -webkit-appearance: none;
+  border: none;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+}
+
+#joinChatRoom img {
+  width: 24px;
+  height: 24px;
+}
+
 @media screen and (max-width: 768px) {
 @media screen and (max-width: 768px) {
   .archive_name {
   .archive_name {
     font-size: 14px;
     font-size: 14px;

public/index.html

@@ -795,6 +795,9 @@
     <div class="archive_detail_room_nm item">
     <div class="archive_detail_room_nm item">
       <h2 class="ttl" id="archiveRoomName">ChatRoomName</h2>
       <h2 class="ttl" id="archiveRoomName">ChatRoomName</h2>
       <span>{{chatRoomName}}</span>
       <span>{{chatRoomName}}</span>
+      <button id="joinChatRoom">
+        <img src="./icon/icon_archive_joinRoom.png" alt="">
+      </button>
     </div>
     </div>
     <div class="archive_detail_sv_user item">
     <div class="archive_detail_sv_user item">
       <h2 class="ttl" id="archiveSaveUser">SaveUser</h2>
       <h2 class="ttl" id="archiveSaveUser">SaveUser</h2>