student-h5/src/views/investigat/InvestigatPage.vue

<template>
  <div class="Investigat">
    <TitleHead text="【调研】管理者进阶腾飞班 - 培训阶段性调研"></TitleHead>

    <div class="notice">
      <div class="noticebox">
        <div class="mani">
          <div class="dir">
            <div class="samegt pre"></div>
            <div class="sameg">上一个</div>
            <div class="sameg" style="margin-left: 15.5px">下一个</div>
            <div class="samegt next"></div>
          </div>
          <div
            class="question"
            v-for="(value, index) in question"
            :key="index"
            :style="{ 'margin-top': '20px' }"
          >
            <div class="text">{{ value.text }}</div>
            <div class="answerL">
              <div>完全没用</div>
              <div>非常好</div>
            </div>
            <div class="answer">
              <div class="answerC">
                <div class="itemwrap">
                  <div
                    class="answerCitem"
                    v-for="(item, key) in select"
                    :key="key"
                    :style="{
                      background:
                        value.selectAnswer === item
                          ? 'rgba(86, 163, 249, 1)'
                          : 'rgba(86, 163, 249, 0)',
                      color:
                        value.selectAnswer === item
                          ? '#fff'
                          : 'rgba(86, 163, 249, 1)',
                    }"
                    @click="score(value, item)"
                  >
                    <div>{{ item }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="question" style="margin-top: 20px">
            <div class="text">4.类似相应的课程，您认为适合哪些人观看？</div>
            <div
              v-for="(value, index) in viewpeople"
              :key="index"
              style="display: flex; align-items: center"
              :style="{ 'margin-top': '22px' }"
              @click="selectPeople(value)"
            >
              <img
                style="width: 14px; height: 13px; cursor: pointer"
                :src="
                  value.select
                    ? require('../../assets/image/investigat/checkbox.png')
                    : require('../../assets/image/investigat/checkbox2.png')
                "
              />
              <div class="people" style="font-size: 13px; margin-left: 7px">
                {{ value.text }}
              </div>
            </div>
          </div>
          <div class="question" style="margin-top: 21px">
            <div class="text">5.您的其他意见</div>
            <div style="margin-top: 21px; position: relative">
              <el-input
                style="width: 100%"
                v-model="textarea1"
                :autosize="{ minRows: 5, maxRows: 5 }"
                resize="none"
                maxlength="200"
                type="textarea"
                @input="textareaInput"
              />
              <div class="words">{{ textarealength }}/200</div>
            </div>
          </div>
          <div style="display: flex; justify-content: center">
            <div class="submit">提交</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import TitleHead from "@/components/TitleHead.vue";
export default {
  name: "InvestigatPage",
  components: {
    TitleHead,
  },
  setup() {
    const state = reactive({
      question: [
        {
          id: 1,
          text: "1.您觉得课程对您是否有用？",
          selectAnswer: 0,
        },
        {
          id: 2,
          text: "2.您是否会推荐课程给其他同事？",
          selectAnswer: 0,
        },
        {
          id: 3,
          text: "3.后续该讲师有其他课程是否会参与？",
          selectAnswer: 0,
        },
      ],
      select: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      viewpeople: [
        {
          id: 1,
          text: "基础员工",
          select: false,
        },
        {
          id: 2,
          text: "中层管理",
          select: false,
        },
        {
          id: 3,
          text: "专业人员",
          select: false,
        },
        {
          id: 4,
          text: "高级管理",
          select: false,
        },
      ],
      textarea1: "",
      textarealength: 0,
    });
    const score = (value, item) => {
      let arr = state.question;
      arr.map((i) => {
        if (i.id === value.id) {
          i.selectAnswer = item;
        }
      });
      state.question = arr;
    };
    const selectPeople = (value) => {
      let arr = state.viewpeople;
      arr.map((i) => {
        if (i.id === value.id) {
          i.select = !i.select;
        }
      });
      state.viewpeople = arr;
    };
    const textareaInput = (e) => {
      // console.log("eee", e);
      state.textarea1 = e;
      state.textarealength = e.length;
    };
    return {
      ...toRefs(state),
      score,
      selectPeople,
      textareaInput,
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
  clear: both;
}
.Investigat {
  width: 100%;

  .notice {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10px;
    .noticebox {
      width: 90%;
      background: #fff;
      border-radius: 4px;
      position: relative;
      display: flex;
      justify-content: center;
      .mani {
        width: 90%;
        margin-top: 20px;

        .dir {
          width: 100%;
          height: 20px;
          // background-color: red;
          margin-bottom: 20px;
          display: flex;
          justify-content: right;
          font-size: 12px;
          color: #2478ff;
          .samegt {
            margin-top: 3px;
            height: 12px;
            width: 12px;
          }
          .samege {
            line-height: 12px;
          }
          .pre {
            margin-right: 5px;
            // background-size: 100%;
            background-image: url(../../assets/image/ballotpage/pre.png);
          }
          .next {
            margin-left: 5px;
            // background-size: 100%;
            background-image: url(../../assets/image/ballotpage/next.png);
          }
        }

        .question {
          .text {
            font-size: 14px;
            font-weight: 500;
            color: #333330;
          }
          .answerL {
            margin-bottom: -20px;
            margin-top: 12px;
            font-size: 13px;
            width: 100%;
            color: #56a3f9;
            display: flex;
            justify-content: space-between;
          }
          .answer {
            margin-top: 30px;
            display: flex;
            align-items: center;
            font-size: 14px;
            font-weight: 500;
            color: #56a3f9;
            .answerC {
              // width: 540px;
              width: 100%;
              height: 43px;
              border: 1px solid #d7e5fd;
              border-radius: 8px;
              display: flex;
              align-items: center;
              // margin-left: 11px;
              // margin-right: 11px;
              justify-content: center;
              .itemwrap {
                width: 92%;
                display: flex;
                justify-content: space-between;
                .answerCitem {
                  width: 24px;
                  height: 24px;
                  border: 1px solid #56a3f9;
                  border-radius: 4px;
                  font-size: 14px;
                  font-weight: 400;
                  color: #ffffff;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  // margin-left: 10px;
                  cursor: pointer;
                }
              }
            }
          }
        }

        .question .answer .question .people {
          font-size: 13px;
          font-weight: 500;
          color: #333330;
          margin-left: 6px;
        }
        .question .words {
          position: absolute;
          right: 15px;
          bottom: 5px;
          font-size: 14px;
          font-weight: 500;
          color: #333330;
        }
        .question .el-textarea__inner {
          border-radius: 8px;
          background-color: rgba(245, 246, 247, 1);
        }
        .submit {
          // width: 126px;
          width: 100%;
          height: 31.5px;
          background: #2478ff;
          box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
          border-radius: 4px;
          font-size: 14px;
          font-weight: 800;
          color: #ffffff;
          line-height: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          margin-top: 10.5px;
          margin-bottom: 30px;
        }
      }
    }
  }
}
</style>