dolphin-weex-ui 2.4.1 → 2.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dolphin-weex-ui",
-  "version": "2.4.1",
+  "version": "2.4.3",
   "description": "inteligense cross platform frame",
   "main": "index.js",
   "directories": {

package/packages/dof-actionsheet/index.vue

@@ -25,7 +25,7 @@
       </slot>
       <div class="midea-actionsheet-content">
         <div
-          v-bind:class="['midea-actionsheet-list']"
+          v-bind:class="['midea-actionsheet-list', !title && index === 0 ? 'midea-actionsheet-list-first' : '']"
           v-for="(item, index) in items"
           :key="index"
           @click="actionsheetItemClick(item, index)"
@@ -50,7 +50,7 @@
           button
         }}</text>
       </div>
-      <div :style="{ height: '0px', 'background-color': '#ffffff' }"></div>
+      <div :style="{ height: '0px', 'background-color': _isDiablo ? diabloBg : '#ffffff' }"></div>
     </div>
   </div>
 </template>
@@ -80,6 +80,7 @@
 .midea-actionsheet-list-first {
   /* border-top-left-radius: 32px;
   border-top-right-radius: 32px; */
+  border-top-width: 0px;
   background-color: #ffffff;
 }
 .midea-actionsheet-list-first:active {
@@ -142,6 +143,37 @@
   bottom: 0;
   top: 0;
 }
+
+@media screen and (weex-theme: diablo) {
+  .title {
+    color: #797c7e;
+    background-color: #1e2326;
+  }
+  .midea-actionsheet-list-first {
+    /* border-top-left-radius: 32px;
+    border-top-right-radius: 32px; */
+    border-top-width: 0px;
+    background-color: #1e2326;
+  }
+  .midea-actionsheet-list-first:active {
+    background-color: #1e2326;
+  }
+  .midea-actionsheet-list {
+    border-top-width: 2px;
+    border-top-color: #303538;
+    background-color: #1e2326;
+  }
+  .midea-actionsheet-list:active {
+    background-color: #1e2326;
+  }
+  .midea-actionsheet-btn {
+    color: #cfcfd0;
+    background-color: #1e2326;
+  }
+  .leftBtn {
+    color: #cfcfd0;
+  }
+}
 </style>
 
 <script>
@@ -150,7 +182,10 @@ const { platform } = weex.config.env
 const isWeb = typeof window === 'object' && platform.toLowerCase() === 'web'
 import { Bridge } from 'dolphin-native-bridge'
 import DofOverlay from '../dof-overlay'
+import DiabloMixin from '../../mixins/diablo'
+
 export default {
+  mixins: [DiabloMixin],
   components: { DofOverlay },
   props: {
     show: {
@@ -164,7 +199,7 @@ export default {
     // 背景色，即按钮上方的横条颜色，暂不开放
     popupColor: {
       type: String,
-      default: '#F9F9F9'
+      default: ''
     },
     overlayCfg: {
       type: Object,
@@ -226,7 +261,8 @@ export default {
   data: () => ({
     haveOverlay: true,
     isOverShow: true,
-    bottomArc: 0
+    bottomArc: 0,
+    diabloBg: '#1e2326'
   }),
   computed: {
     isNeedShow() {
@@ -252,7 +288,7 @@ export default {
       const { pos, width, popupColor } = this
       const style = {
         width: `${width}px`,
-        backgroundColor: popupColor
+        backgroundColor: popupColor ? popupColor : this._isDiablo ? '#101315' : '#F9F9F9'
         // backgroundColor: '#616C73'
       }
       if (pos === 'bottom') {
@@ -265,7 +301,7 @@ export default {
     },
     bottomIpxStyle() {
       const style = {
-        backgroundColor: '#ffffff',
+        backgroundColor: this._isDiablo ? this.diabloBg : '#ffffff',
         paddingBottom: `${this.isipx ? 84 : 16}px`
       }
       return style
@@ -381,7 +417,7 @@ export default {
       return _transform
     },
     textStyleOps(item) {
-      return item.textColor ? { color: item.textColor } : { color: '#1E2E37' }
+      return item.textColor ? { color: item.textColor } : { color: this._isDiablo ? '#cfcfd0' : '#1E2E37' }
     }
   }
 }

package/packages/dof-bottom-bar/diablo.css

@@ -22,4 +22,7 @@
   .animate-circle {
     background-color: #e5e5e8;
   }
+  .tab-bar-item-icon {
+    opacity: 0.85;
+  }
 }

package/packages/dof-card/style.js

@@ -2,6 +2,9 @@ export const STYLE_MAP = {
   default: {
     borderRadius: '32px'
   },
+  diablo: {
+    borderRadius: '32px'
+  },
   colmo: {
     borderRadius: '0px'
   }

package/packages/dof-checkbox/diablo.css

@@ -25,7 +25,14 @@
   .checkbox-disabled {
     opacity: 1;
   }
-  .checkbox-icon-disabled {
-    opacity: 0.3;
+  .disabledMask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    /* background-color: rgba(0, 0, 0, 0.3); */
+    background-color: #101315;
+    opacity: 0.7;
   }
 }

package/packages/dof-checkbox/index.vue

@@ -55,6 +55,7 @@
       <dof-image :src="ARROW_ICON" class="cell-arrow-icon" v-if="hasArrow"></dof-image>
     </div>
     <div v-if="!itemImg && hasSubBottomBorder" class="fakeSubBorder"></div>
+    <div v-if="_isDiablo && disabled" class="disabledMask"></div>
   </div>
 </template>
 

package/packages/dof-icon-button/index.vue

@@ -160,7 +160,7 @@ export default {
       if (this._isColmo) {
         return this.isPlain ? 'transparent' : '#2d2e2f'
       } else {
-        return this._isDiablo ? '#2b2f32' : '#F6F7F9'
+        return this._isDiablo ? '#45494C' : '#F6F7F9'
       }
     },
     // 点击背景颜色

package/packages/dof-modal/index.vue

@@ -203,7 +203,7 @@
   /* border-right-color: #c8c7cc; */
   border-right-width: 1px;
   /*H5处理兼容*/
-  border-right: 1px solid #f3f3f3;
+  /* border-right: 1px solid #f3f3f3; */
 }
 
 .btn-text {