|
|
@@ -0,0 +1,122 @@
|
|
|
+<template>
|
|
|
+ <div class="authentication-page">
|
|
|
+ <custom-header name="认证身份"></custom-header>
|
|
|
+ <div class="content">
|
|
|
+ <span class="text">请选择您要认证的身份</span>
|
|
|
+ <div class="card-group">
|
|
|
+ <div
|
|
|
+ :class="['card-item', { active: active === index }]"
|
|
|
+ v-for="(item, index) in list"
|
|
|
+ :key="index"
|
|
|
+ @click="handleActive(item, index)"
|
|
|
+ >
|
|
|
+ <div class="info">
|
|
|
+ <div class="name">{{ item.name }}</div>
|
|
|
+ <span>{{ item.desc }}</span>
|
|
|
+ </div>
|
|
|
+ <img :src="require(`@/assets/img/mine/${item.icon}-icon.png`)" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="button" @click="handleOk">选好了</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import customHeader from "@/components/customHeader.vue";
|
|
|
+import {ref} from 'vue'
|
|
|
+import { useRouter } from "vue-router";
|
|
|
+const router = useRouter();
|
|
|
+
|
|
|
+const list = [
|
|
|
+ {
|
|
|
+ name:"专家",
|
|
|
+ desc:"根据表型触发农事,确认农事处方",
|
|
|
+ icon:"figure",
|
|
|
+ identity:"EXPERT",
|
|
|
+ role:3
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:"农资农服",
|
|
|
+ desc:"巡飞地形,收集农情测报",
|
|
|
+ icon:"drone",
|
|
|
+ identity:"NZ",
|
|
|
+ role:2
|
|
|
+ },
|
|
|
+]
|
|
|
+ // {
|
|
|
+ // name:"农服",
|
|
|
+ // desc:"接单执行,服务农户",
|
|
|
+ // icon:"shield",
|
|
|
+ // identity:"NF",
|
|
|
+ // role:1
|
|
|
+ // }
|
|
|
+
|
|
|
+const active = ref(0)
|
|
|
+const handleActive = (item,index) =>{
|
|
|
+ active.value = index
|
|
|
+}
|
|
|
+
|
|
|
+const handleOk = () =>{
|
|
|
+ // router.push(`/register?identity=${list[active.value].identity}&role=${list[active.value].role}`)
|
|
|
+ router.push(`/register??identity=NZ`)
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.authentication-page {
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ background-color: #f5f7fb;
|
|
|
+ .content {
|
|
|
+ height: calc(100% - 40px);
|
|
|
+ padding: 60px 30px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .text {
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ .card-group {
|
|
|
+ margin-top: 26px;
|
|
|
+ .card-item {
|
|
|
+ background: #fff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 27px 20px;
|
|
|
+ border-radius: 2px;
|
|
|
+ border: 1px solid transparent;
|
|
|
+ &.active {
|
|
|
+ background: rgba(33, 153, 248, 0.1);
|
|
|
+ border: 1px solid #2199f8;
|
|
|
+ }
|
|
|
+ .info {
|
|
|
+ .name {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 2px;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ color: rgba(0, 0, 0, 0.2);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 42px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-item + .card-item {
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .button {
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 2px;
|
|
|
+ background: #2199f8;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 16px;
|
|
|
+ padding: 8px 0;
|
|
|
+ margin-top: 50px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|