Browse Source

update css

gemer 4 năm trước cách đây
mục cha
commit
79ac4fdc96
2 tập tin đã thay đổi với 9 bổ sung17 xóa
  1. 1 0
      src/App.vue
  2. 8 17
      src/components/Danmaku.vue

+ 1 - 0
src/App.vue

@@ -3,6 +3,7 @@
     <div class="demo-container">
       <Danmaku
         class="demo-danmaku"
+        :arrowIcon="require('./assets/list-enable-btn.png')"
         :showIcon="require('./assets/list-enable-btn.png')"
         :closeIcon="require('./assets/list-disable-btn.png')"
       />

+ 8 - 17
src/components/Danmaku.vue

@@ -61,16 +61,6 @@ export default {
       type: Array,
       default: function() {
         return [
-          // "向英雄致敬!铁骨铮铮,保家卫国。",
-          // "向英雄致敬!",
-          // "向英雄致敬!铁骨铮铮",
-          // "向英雄致敬!铁骨铮铮,保家卫国。",
-          // "向英雄致敬!铁骨铮铮,保家卫国。抗美援朝战争的伟大胜利,宣告着中华民族巍巍屹立与东方。",
-          // "向英雄致敬!铁骨铮铮,保家卫国。抗美援朝战争的伟大胜利,宣告着中华民族巍巍屹立与东方。牢记历史,珍惜现在!牢记志愿军英烈的伟大贡献,珍惜现在的幸福生活",
-          // "向英雄致敬!铁骨铮铮,保家卫国。抗美援朝战争的伟大胜利,宣告着中华民族巍巍屹立与东方。牢记历史,珍惜现在!牢记志愿军英烈的伟大贡献,珍惜现在的幸福生活",
-          // "向英雄致敬!铁骨铮铮,保家卫国。抗美援朝战争的伟大胜利,宣告着中华民族巍巍屹立与东方。牢记历史,珍惜现在!牢记志愿军英烈的伟大贡献,珍惜现在的幸福生活",
-          // "向英雄致敬!铁骨铮铮,保家卫国。抗美援朝战争的伟大胜利,宣告着中华民族巍巍屹立与东方。牢记历史,珍惜现在!牢记志愿军英烈的伟大贡献,珍惜现在的幸福生活",
-          // "向英雄致敬!",
         ];
       },
     },
@@ -197,8 +187,9 @@ export default {
 
 .input-container {
   background: rgba(0, 0, 0, 0.6);
-  border-radius: 20px;
-  max-width: 320px;
+  border-radius: 25px;
+  max-width: 350px;
+  height: 48px;
   display: flex;
   flex-flow: row nowrap;
   justify-content: space-between;
@@ -210,15 +201,16 @@ export default {
   color: rgb(140, 140, 140);
   cursor: pointer;
   flex: 1;
-  height: 100%;
+  height: 48px;
   text-align: left;
-  line-height: 34px;
+  line-height: 48px;
 }
 .input-container > * {
   cursor: pointer;
 }
 .arrow-icon {
   margin-right: 8px;
+  width: 24px;
 }
 
 .send-btn {
@@ -243,8 +235,7 @@ export default {
 }
 .send-btn-container .show-icon,
 .send-btn-container .close-icon {
-  width: 30px;
-  height: 30px;
+  width: 24px;
 }
 .input-container .show-list {
   text-decoration: none;
@@ -254,7 +245,7 @@ export default {
   background: rgba(0, 0, 0, 0.7);
   width: 340px;
   color: #fff;
-  border-radius: 15px;
+  border-radius: 25px;
   max-height: 200px;
   overflow-x: hidden;
   overflow-y: scroll;