Explorar o código

修改属性动作UI

zhangwf %!s(int64=5) %!d(string=hai) anos
pai
achega
09edf2241a
Modificáronse 1 ficheiros con 26 adicións e 20 borrados
  1. 26 20
      src/components/EditPanel.vue

+ 26 - 20
src/components/EditPanel.vue

@@ -561,7 +561,7 @@
           <el-slider v-model="element.duration" :step="0.1" :min="0" :max="10" show-input input-size="mini"
             style="width:80%;margin-right: 10px"></el-slider>
         </div>
-  
+
         <div style="display:flex; flex-direction: row;width: 100%;justify-content: space-between;align-items: center">
           <span style="font-size:12px;
           font-family:MicrosoftYaHei;
@@ -571,15 +571,17 @@
             style="width:80%;margin-right: 10px"></el-slider>
         </div>
       </div>
-     
 
-      <div style="vertical-align: middle; width: 100%; padding-top: 12px; padding-bottom: 12px;border-bottom: #E2E4EE solid 1px; display: flex; flex-direction: row;align-items: center">
+
+      <div
+        style="vertical-align: middle; width: 100%; padding-top: 12px; padding-bottom: 12px;border-bottom: #E2E4EE solid 1px; display: flex; flex-direction: row;align-items: center">
         <div style="font-size:12px;
         font-family:MicrosoftYaHei;
         margin-left: 20px;
         color:rgba(51,51,51,1);
         line-height:16px;letter-spacing: 0;">是否循环</div>
-        <el-switch v-model="element.loop" style="margin-left: 6px;" active-color="#4E5DFF" inactive-color="#D7E2FF"></el-switch>
+        <el-switch v-model="element.loop" style="margin-left: 6px;" active-color="#4E5DFF" inactive-color="#D7E2FF">
+        </el-switch>
       </div>
 
       <div style="width: 100%;">
@@ -589,30 +591,34 @@
         margin-top: 12px;
         color:rgba(51,51,51,1);">选择动画</div>
       </div>
-      <div style="margin-top: 20px; ">
-        <div v-show="panelState === 11">
-          <div style="font-size:12px;
-          font-family:MicrosoftYaHei;
-          color:rgba(51,51,51,1);letter-spacing: 0;">文字逐字特效:</div>
-          <br>
+      <div style="margin-top: 10px; ">
+        <div v-show="panelState === 11" style="width: 100%; padding-left:20px;padding-right: 8px;">
           <div
-            style="background: #EBEDEF;display: inline-flex; width:33.3%;overflow: hidden;text-align: center; cursor: pointer"
+            style="display: inline-flex;margin-right: 12px;margin-bottom: 10px; overflow: hidden;text-align: center; cursor: pointer"
             v-for="(font,index) in animateFontList">
             <div v-model="element.animatedFont" @click="checkAnimationFont(font)" :title="font.name" :type="font.type"
-              :style="{'font-size': '12px',color: element.animatedFont==font.id? 'white':'#999999','letter-spacing': 0, width:'100%','word-break':'keep-all',padding: '20px',
-               'background': element.animatedFont==font.id? 'green':'',
-               'font-weight': element.animatedFont==font.id? 'bold':''
+              :style="{'background':'rgba(238,242,250,1)',
+                'border-radius':'12px',
+                'border':'1px solid rgba(205,209,221,1)','font-size': '12px',color: element.animatedFont==font.id? 'white':'#999999','letter-spacing': 0,'word-break':'keep-all',padding: '4px 13px',
+               'background': element.animatedFont==font.id? '#4E5DFF':'rgba(238,242,250,1)',
+               'border': element.animatedFont==font.id? '1px solid #4E5DFF':'1px solid rgba(205,209,221,1)',
                }" :hxFont="element.animatedFont" :hxid="font.id">{{font.name}}</div>
           </div>
         </div>
-        <div
-          style="background: #EBEDEF;display: inline-flex; width:33.3%;overflow: hidden;text-align: center; cursor: pointer"
-          v-for="(item,index) in animateList">
-          <div v-model="element.animatedName" @click="checkAnimation(item)" :title="item.name" :type="item.type" :style="{'font-size': '12px',color: element.animatedName==item.id? 'white':'#999999','letter-spacing': 0, width:'100%','word-break':'keep-all',padding: '20px',
-               'background': element.animatedName==item.id? 'green':'',
-               'font-weight': element.animatedName==item.id? 'bold':''
+        <div style="width: 100%; padding-left:20px;padding-right: 8px;">
+          <div
+            style="display: inline-flex;margin-right: 12px;margin-bottom: 10px; overflow: hidden;text-align: center; cursor: pointer"
+            v-for="(item,index) in animateList">
+            <div v-model="element.animatedName" @click="checkAnimation(item)" :title="item.name" :type="item.type"
+              :style="{'background':'rgba(238,242,250,1)',
+          'border-radius':'12px',
+          'border':'1px solid rgba(205,209,221,1)','font-size': '12px',color: element.animatedName==item.id? 'white':'#999999','letter-spacing': 0,'word-break':'keep-all',padding: '4px 13px',
+               'background': element.animatedName==item.id? '#4E5DFF':'rgba(238,242,250,1)',
+               'border': element.animatedName==item.id? '1px solid #4E5DFF':'1px solid rgba(205,209,221,1)'
                }">{{item.name}}</div>
+          </div>
         </div>
+
       </div>
     </div>