样式优化

vincentzyc · vincentzyc · commit 0f38e04daddc · 2019-04-16T10:07:38.000+08:00
diff --git a/src/assets/css/widget.styl b/src/assets/css/widget.styl
@@ -72,14 +72,6 @@ $primary-background-color = #d8e8fa;
     z-index: 1009;
   }
 
-  .widget-view.widget-view-imgshow {
-    padding: 0;
-
-    .img-placeholder {
-      background: #f1f1f1;
-    }
-  }
-
   .widget-view {
     margin: 0;
     padding: 5px 10px;
@@ -261,5 +253,42 @@ $primary-background-color = #d8e8fa;
         backface-visibility: hidden;
       }
     }
+
+    .wg-imgshow {
+      margin: -5px -10px;
+
+      .img-placeholder {
+        background: #f1f1f1;
+      }
+    }
+
+    .wg-imgslide {
+      margin: -5px -10px;
+      text-align: center;
+
+      .el-carousel__container {
+        height: 100%;
+      }
+
+      .el-carousel__item {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .el-carousel__item h3 {
+        color: #475669;
+        font-size: 18px;
+        opacity: 0.75;
+      }
+
+      .el-carousel__item:nth-child(2n) {
+        background-color: #99a9bf;
+      }
+
+      .el-carousel__item:nth-child(2n+1) {
+        background-color: #d3dce6;
+      }
+    }
   }
 }
diff --git a/src/assets/json/widget.json b/src/assets/json/widget.json
@@ -153,13 +153,18 @@
 	"imgComponents": [{
 		"type": "imgSlide",
 		"name": "图片轮播",
-		"value": "",
-		"margin": "0px 0px 0px 0px"
+		"value": [],
+		"style": {
+      "margin": "0px 0px 0px 0px",
+      "height": 250
+		}
 	}, {
 		"type": "imgShow",
 		"name": "图片展示",
 		"value": "",
-		"margin": "0px 0px 0px 0px"
+		"style": {
+			"margin": "0px 0px 0px 0px"
+		}
 	}],
 	"assistComponents": [{
 		"type": "staticText",
diff --git a/src/components/widget-form-list.vue b/src/components/widget-form-list.vue
@@ -7,12 +7,7 @@
     :class="{'widget-empty': pageData[list].length === 0}"
   >
     <template v-for="(item, index) in pageData[list]">
-      <div
-        class="widget-view"
-        :key="item.key"
-        :class="{active: selectWg.key === item.key,'widget-view-imgshow':item.type === 'imgShow'}"
-        @click="handleSelectWidget(index)"
-      >
+      <div class="widget-view" :key="item.key" :class="{active: selectWg.key === item.key}" @click="handleSelectWidget(index)">
         <!-- 手机 -->
         <div v-if="item.type === 'phone'" class="wg-phone" :style="item.style">
           <div class="wg-item" :class="[item.label.labelPosition==='top'?'flex-column':'align-middle']">
@@ -103,9 +98,22 @@
         </div>
 
         <!-- 图片展示 -->
-        <div class="flex flex-center" v-if="item.type === 'imgShow'" :class="{'img-placeholder':!item.value}" :style="item.style">
-          <img v-if="item.value" :src="item.value" alt="图片展示" width="100%">
-          <img v-else src="@/assets/img/img-placeholder.png" alt="图片展示">
+        <div class="wg-imgshow" v-if="item.type === 'imgShow'">
+          <div class="flex flex-center" :class="{'img-placeholder':!item.value}" :style="item.style">
+            <img v-if="item.value" :src="item.value" alt="图片展示" width="100%">
+            <img v-else src="@/assets/img/img-placeholder.png" alt="图片展示">
+          </div>
+        </div>
+
+        <!-- 图片轮播 -->
+        <div class="wg-imgslide" v-if="item.type === 'imgSlide'">
+          <div class="flex flex-center" :style="{margin:item.style.margin}">
+            <el-carousel :interval="5000" arrow="never" :style="{width:'100%',height:item.style.height+'px'}">
+              <el-carousel-item v-for="item in 4" :key="item">
+                <span>{{ item }}</span>
+              </el-carousel-item>
+            </el-carousel>
+          </div>
         </div>
 
         <!-- 按钮 -->
diff --git a/src/components/widget-form.vue b/src/components/widget-form.vue
@@ -22,7 +22,7 @@ export default {
   },
   computed: {
     themeBanner() {
-      if (this.theme.banner.includes("http")) {
+      if (this.theme.banner.includes("http://")||this.theme.banner.includes("https://")) {
         return this.theme.banner;
       }
       return this.BASE_URL + this.theme.banner;
diff --git a/src/plugins/element.js b/src/plugins/element.js
@@ -1,15 +1,15 @@
 import Vue from "vue";
 import {
-  Pagination,
-  Dialog,
-  Autocomplete,
+  // Pagination,
+  // Dialog,
+  // Autocomplete,
   Dropdown,
   DropdownMenu,
   DropdownItem,
-  Menu,
-  Submenu,
-  MenuItem,
-  MenuItemGroup,
+  // Menu,
+  // Submenu,
+  // MenuItem,
+  // MenuItemGroup,
   Input,
   InputNumber,
   Radio,
@@ -24,40 +24,40 @@ import {
   OptionGroup,
   Button,
   ButtonGroup,
-  Table,
-  TableColumn,
-  DatePicker,
-  TimeSelect,
-  TimePicker,
-  Popover,
-  Tooltip,
-  Breadcrumb,
-  BreadcrumbItem,
+  // Table,
+  // TableColumn,
+  // DatePicker,
+  // TimeSelect,
+  // TimePicker,
+  // Popover,
+  // Tooltip,
+  // Breadcrumb,
+  // BreadcrumbItem,
   Form,
   FormItem,
-  Tabs,
-  TabPane,
-  Tag,
-  Tree,
-  Alert,
-  Slider,
-  Icon,
-  Row,
-  Col,
+  // Tabs,
+  // TabPane,
+  // Tag,
+  // Tree,
+  // Alert,
+  // Slider,
+  // Icon,
+  // Row,
+  // Col,
   Upload,
-  Progress,
-  Badge,
-  Card,
-  Rate,
-  Steps,
-  Step,
+  // Progress,
+  // Badge,
+  // Card,
+  // Rate,
+  // Steps,
+  // Step,
   Carousel,
   CarouselItem,
   Collapse,
   CollapseItem,
-  Cascader,
+  // Cascader,
   ColorPicker,
-  Transfer,
+  // Transfer,
   Container,
   Header,
   Aside,
@@ -66,67 +66,67 @@ import {
   Loading,
   MessageBox,
   Message,
-  Notification
+  // Notification
 } from "element-ui";
 
-Vue.use(Pagination);
-Vue.use(Dialog);
-  Vue.use(Autocomplete);
+// Vue.use(Pagination);
+// Vue.use(Dialog);
+// Vue.use(Autocomplete);
 Vue.use(Dropdown);
 Vue.use(DropdownMenu);
 Vue.use(DropdownItem);
-Vue.use(Menu);
-Vue.use(Submenu);
-Vue.use(MenuItem);
-  Vue.use(MenuItemGroup);
+// Vue.use(Menu);
+// Vue.use(Submenu);
+// Vue.use(MenuItem);
+// Vue.use(MenuItemGroup);
 Vue.use(Input);
-  Vue.use(InputNumber);
-  Vue.use(Radio);
-  Vue.use(RadioGroup);
-  Vue.use(RadioButton);
-  Vue.use(Checkbox);
-  Vue.use(CheckboxButton);
-  Vue.use(CheckboxGroup);
-  Vue.use(Switch);
-  Vue.use(Select);
-  Vue.use(Option);
-  Vue.use(OptionGroup);
+Vue.use(InputNumber);
+Vue.use(Radio);
+Vue.use(RadioGroup);
+Vue.use(RadioButton);
+Vue.use(Checkbox);
+Vue.use(CheckboxButton);
+Vue.use(CheckboxGroup);
+Vue.use(Switch);
+Vue.use(Select);
+Vue.use(Option);
+Vue.use(OptionGroup);
 Vue.use(Button);
-  Vue.use(ButtonGroup);
-  Vue.use(Table);
-  Vue.use(TableColumn);
-  Vue.use(DatePicker);
-  Vue.use(TimeSelect);
-  Vue.use(TimePicker);
-  Vue.use(Popover);
-Vue.use(Tooltip);
-Vue.use(Breadcrumb);
-Vue.use(BreadcrumbItem);
+Vue.use(ButtonGroup);
+// Vue.use(Table);
+// Vue.use(TableColumn);
+// Vue.use(DatePicker);
+// Vue.use(TimeSelect);
+// Vue.use(TimePicker);
+// Vue.use(Popover);
+// Vue.use(Tooltip);
+// Vue.use(Breadcrumb);
+// Vue.use(BreadcrumbItem);
 Vue.use(Form);
 Vue.use(FormItem);
-  Vue.use(Tabs);
-  Vue.use(TabPane);
-  Vue.use(Tag);
-  Vue.use(Tree);
-  Vue.use(Alert);
-  Vue.use(Slider);
-  Vue.use(Icon);
-  Vue.use(Row);
-  Vue.use(Col);
-  Vue.use(Upload);
-  Vue.use(Progress);
-  Vue.use(Badge);
-  Vue.use(Card);
-  Vue.use(Rate);
-  Vue.use(Steps);
-  Vue.use(Step);
-  Vue.use(Carousel);
-  Vue.use(CarouselItem);
-  Vue.use(Collapse);
-  Vue.use(CollapseItem);
-  Vue.use(Cascader);
-  Vue.use(ColorPicker);
-  Vue.use(Transfer);
+// Vue.use(Tabs);
+// Vue.use(TabPane);
+// Vue.use(Tag);
+// Vue.use(Tree);
+// Vue.use(Alert);
+// Vue.use(Slider);
+// Vue.use(Icon);
+// Vue.use(Row);
+// Vue.use(Col);
+Vue.use(Upload);
+// Vue.use(Progress);
+// Vue.use(Badge);
+// Vue.use(Card);
+// Vue.use(Rate);
+// Vue.use(Steps);
+// Vue.use(Step);
+Vue.use(Carousel);
+Vue.use(CarouselItem);
+Vue.use(Collapse);
+Vue.use(CollapseItem);
+// Vue.use(Cascader);
+Vue.use(ColorPicker);
+// Vue.use(Transfer);
 Vue.use(Container);
 Vue.use(Header);
 Vue.use(Aside);
@@ -140,5 +140,5 @@ Vue.prototype.$msgbox = MessageBox;
 Vue.prototype.$alert = MessageBox.alert;
 Vue.prototype.$confirm = MessageBox.confirm;
 Vue.prototype.$prompt = MessageBox.prompt;
-Vue.prototype.$notify = Notification;
+// Vue.prototype.$notify = Notification;
 Vue.prototype.$message = Message;

Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@ export default {`
`22`	`22`	`},`
`23`	`23`	`computed: {`
`24`	`24`	`themeBanner() {`
`25`		`- if (this.theme.banner.includes("http")) {`
	`25`	`+ if (this.theme.banner.includes("http://")\|\|this.theme.banner.includes("https://")) {`
`26`	`26`	`return this.theme.banner;`
`27`	`27`	`}`
`28`	`28`	`return this.BASE_URL + this.theme.banner;`