11

src/assets/theme/layout.less

@@ -3144,6 +3144,9 @@ line-height: 48px;
 .mb100{
   margin-bottom: 100px
 }
+
+
+
 @import url("./phone");
 @import url("./extra");
 @import url("./product");

src/pages/news/index.vue

@@ -58,22 +58,38 @@
                 {{item.label}}
               </Option>
             </Select> -->
-            <FormItem label="邮箱" prop="telephone" @on-click="select">
+            <FormItem :label="formItem" :prop="xx[i]" style="position:relative">
+              <Input
+                v-model="formValidate.telephone"
+                style="width:180px"
+              ></Input>
+            </FormItem>
+            <div class="icon-1">
               <Icon
                 type="ios-arrow-down"
                 v-if="down == true"
-                style="line-height:32px"
+                style="width:80px;text-align:right"
+                @click.native="select"
               />
+            </div>
+            <div class="icon-1">
               <Icon
                 type="ios-arrow-up"
                 v-if="up == true"
-                style="line-height:32px"
+                style="width:80px;text-align:right"
+                @click.native="select"
               />
-              <Input
-                v-model="formValidate.telephone"
-                style="width:180px"
-              ></Input>
-            </FormItem>
+            </div>
+
+            <div class="erji" v-show="selFlag == true">
+              <div
+                v-for="(item, index) in emil1"
+                :key="index"
+                @click="emil(item, index)"
+              >
+                {{ item }}
+              </div>
+            </div>
           </Col>
         </Row>
         <Input
@@ -139,9 +155,14 @@
         </Row>
         <Row>
           <Col span="24" style="text-align:center">
-            <div class="more" @click="handleSubmit('formValidate')">
-              <a href="">提交</a>
-            </div>
+            <Button
+              type="primary"
+              shape="circle"
+              width="100px"
+              size="large"
+              @click="handleSubmit('formValidate')"
+              >提交</Button
+            >
           </Col>
         </Row>
       </Form>
@@ -253,7 +274,12 @@ export default {
         ]
       },
       down: true,
-      up: false
+      up: false,
+      selFlag: false,
+      emil1: ["联系方式", "邮箱"],
+      formItem: "请选择",
+      xx: ["telephone", "email"],
+      i: 0
     };
   },
   created() {},
@@ -280,15 +306,45 @@ export default {
       });
     },
     select() {
+      this.selFlag = true;
       this.down = false;
       this.up = true;
-      console.log(this.down, this.up);
+    },
+    emil(item, index) {
+      console.log("11111", item);
+      this.formItem = item; //这个是formitem的值，当是联系方式的时候正则判断是电话 邮箱正则判断是邮箱
+      this.selFlag = false;
+      this.down = true;
+      this.up = false;
+      this.i = index;
     }
   }
 };
 </script>
 
 <style lang="less">
+.erji {
+  width: 80px;
+  height: 75px;
+  position: absolute;
+  top: 35px;
+  z-index: 999;
+  left: 0px;
+  padding: 5px 10px;
+  border-radius: 5px;
+  background-color: #fff;
+  box-shadow: 0 0 0 2px #f5f5f5;
+  div:hover {
+    background-color: #f3f3f3;
+    cursor: pointer;
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+}
+.icon-1 {
+  position: absolute;
+  top: 1px;
+}
 .pc1 {
   margin-top: 100px;
   min-height: 740px;
@@ -327,6 +383,7 @@ export default {
   font-weight: 500;
   color: #232323;
   opacity: 1;
+  margin-right: 20px;
 }
 .ivu-form-item-content {
   display: flex;