vue-insagent-pc/src/views/Intro/Intro.vue

<template>
  <div class="page-container" style="width:100%;margin-top:15px;">
    <!-- <MyForm ref="publicForm" :formItems="formItems" :formData="formData" :refVerification="refVerification" :searchSelectOptionsCb="searchSelectOptionsCb"
        @selectChange="selectChange" @inputINPUT="inputINPUT" @inputChange="inputChange"
        @querySelectValue="querySelectValue" @formSwitchChange="formSwitchChange" @buttonClick="buttonClick">
      </MyForm> -->
    
  </div>
</template>
<script>
  import MyForm from '../../components/Form/MyForm.vue';
  import formJs from '@/components/Form/FormConfig.js'
export default {
  components: {
    MyForm
  },
  data() {
      return {
        // dialog: false, //弹出框
        // formItems: formJs.formItems,
        // refVerification:formJs.refVerification,
        // formData: {},
        // searchSelectOptionsCb: [], //form表单搜索select返回值
      };
    },
    created() {
    },
    watch: {
      dialog(newVal, oldVal) {
        if (!newVal) {
          this.$refs.publicForm.resetForm(); //窗口关闭清空表单
        }
      },
    },
    methods: {
      // select选择框变化
      selectChange(value, index, prop) {
        console.log(value, index, prop)
      },
      // inpuit变化
      inputINPUT(value, index, prop) {
        console.log(value, index, prop)
      },
      // inpuit Change
      inputChange(value, index, prop) {
        console.log(value, index, prop)
      },
      // select 搜索值
      querySelectValue(value, index, prop) {
        console.log(value, index, prop)
        let arr = [{
          label: '搜索返回1号',
          value: 1
        }, {
          label: '搜索返回2号',
          value: 2
        }];
        this.searchSelectOptionsCb = arr;
      },
      // form表单switch变化
      formSwitchChange(val, index, prop) {
        console.log(val, index, prop)
      },
      // 按钮点击
      buttonClick(index, prop) {
        console.log(index, prop)
      },
      dialogOK() {
        //判断表单验证是否通过
        if (this.$refs.publicForm.submitForm()) {
          console.log("success");
          console.log(this.formData)
        } else {
          console.log("error")
        }
      },
    }
}
</script>

<style>
.carousel {
  padding-left: 20px;
  padding-right: 20px;
  margin-right: 20px;
}

.carousel h2 {
  color: #475669;
  font-size: 22px;
  opacity: 1.75;
  line-height: 100px;
  margin: 0;
}

.carousel ul {
  color: #475669;
  font-size: 15px;
  opacity: 1.75;
  line-height: 40px;
  margin: 0;
}

.carousel-item-intro h2 {
  color: #ffffff;
  font-size: 22px;
  opacity: 1.75;
  line-height: 80px;
  margin: 0;
}

.carousel-item-intro ul {
  color: #ffffff;
  font-size: 15px;
  opacity: 1.75;
  line-height: 65px;
  padding: 5px;
  margin: 0;
}

.carousel-item-func h2 {
  color: #3f393b;
  font-size: 22px;
  opacity: 1.75;
  line-height: 50px;
  margin: 0;
}

.carousel-item-func ul {
  color: #3f393b;
  font-size: 15px;
  opacity: 1.75;
  line-height: 30px;
  text-align: left;
  padding-left: 90px;
  margin: 0;
}

.carousel-item-env h2 {
  color: #475669;
  font-size: 22px;
  opacity: 1.75;
  line-height: 50px;
  margin: 0;
}

.carousel-item-env ul {
  color: #475669;
  font-size: 15px;
  opacity: 1.75;
  line-height: 35px;
  text-align: left;
  padding-left: 110px;
  margin: 0;
}

.carousel-item-intro {
  background-color: #19aaaf73;
  -webkit-border-radius: 25px;
  border-radius: 25px;
  -moz-border-radius: 15px;
  background-clip: padding-box;
  box-shadow: 0 0 25px #a3b3b965;
}

.carousel-item-func {
  background-color: #19aaaf73;
  -webkit-border-radius: 25px;
  border-radius: 25px;
  -moz-border-radius: 15px;
  background-clip: padding-box;
  box-shadow: 0 0 25px #a3b3b965;
}

.carousel-item-env {
  background-color: #19aaaf73;
  -webkit-border-radius: 25px;
  border-radius: 25px;
  -moz-border-radius: 15px;
  background-clip: padding-box;
  box-shadow: 0 0 25px #a3b3b965;
}

.carousel-item-intro {
  background-color: #b95e5e;
}

.carousel-item-func {
  background-color: #52c578;
}

.carousel-item-env {
  background-color: #41a7b9;
}
.dr_ul{
  overflow-x: auto;
  display: -webkit-box;
  -webkit-overflow-scrolling: touch;
  margin: 0.5rem 0.5rem;
}

</style>