|
|
@@ -0,0 +1,637 @@
|
|
|
+<template>
|
|
|
+ <div class="container">
|
|
|
+ <skillCertHeader title="技术等级认证"></skillCertHeader>
|
|
|
+ <flow :dataList="flowList"></flow>
|
|
|
+ <div class="description rule">
|
|
|
+ <div class="col-title">
|
|
|
+ <span class="label">评级细则</span>
|
|
|
+ </div>
|
|
|
+ <div class="rule-content">
|
|
|
+ <div class="text" v-for="(item,index) in rules" :key="index">
|
|
|
+ <p class="text-title">{{item.title}}</p>
|
|
|
+ <a v-if="item.linkUrl" class="text-content text-content--a" :href="item.linkUrl" target="view_window">{{item.content}}</a>
|
|
|
+ <p v-else class="text-content" v-html="item.content"></p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="description condition">
|
|
|
+ <div class="col-title">
|
|
|
+ <span class="label">申请条件</span>
|
|
|
+ </div>
|
|
|
+ <div class="item" v-for="(item,index) in conditions" :key="index">
|
|
|
+ <span class="text">{{item.text}}</span>
|
|
|
+ <a v-if="item.linkUrl" class="action" :href="item.linkUrl">{{item.linkName}}</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-title width-infinity">
|
|
|
+ <span class="label">填写表单</span>
|
|
|
+ </div>
|
|
|
+ <div class="field-selector">
|
|
|
+ <span class="selector-title">选择领域:</span>
|
|
|
+ <div :class="['fields',item.disabled?'tag--disabled':'']" v-for="(item) in fields" :key="item.occupation_id"
|
|
|
+ @click="fieldSelected(item.occupation_id)">
|
|
|
+ <div class="tag" v-if="item.selected">
|
|
|
+ <span class="text">{{item.occupation_name}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="tag tag--unchecked" v-else>
|
|
|
+ <span class="text text--unchecked">{{item.occupation_name}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tag-selector">
|
|
|
+ <span class="selector-title">选择标签:</span>
|
|
|
+ <div class="tag" v-for="(item,index) in tagsSelected" :key="index">
|
|
|
+ <span class="text">{{item.skill_name}}</span>
|
|
|
+ <img class="icon" src="@/assets/img/skill_cert/icon_remove.png" alt="" @click="onRemoveTag(index)"/>
|
|
|
+ </div>
|
|
|
+ <el-input class="tag-input" v-model="tagText" placeholder="请输入自定义标签" clearable @change="onInputChange"></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="tags">
|
|
|
+ <div class="tag" v-for="(item) in tags" :key="item.skill_id" @click="onTagSelected(item)">
|
|
|
+ <span class="text">{{item.skill_name}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="level-selector" @click="toLevelsDesc">
|
|
|
+ <div class="col-title">
|
|
|
+ <span class="label">选择认证等级</span>
|
|
|
+ </div>
|
|
|
+ <span class="action">等级对照表</span>
|
|
|
+ <img class="icon" src="@/assets/img/skill_cert/icon_tips.png" alt=""/>
|
|
|
+ </div>
|
|
|
+ <div class="level-selector">
|
|
|
+ <el-select v-model="level" placeholder="认证等级" clearable @change="handleLevelChange">
|
|
|
+ <el-option
|
|
|
+ v-for="dict in levels"
|
|
|
+ :key="dict.item_id"
|
|
|
+ :label="dict.name"
|
|
|
+ :value="dict.item_id"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="col-title width-infinity upload-title">
|
|
|
+ <span class="label">上传薪资证明</span>
|
|
|
+ </div>
|
|
|
+ <div class="width-infinity">
|
|
|
+ <el-upload
|
|
|
+ class="upload-demo"
|
|
|
+ drag
|
|
|
+ action="/upload_image"
|
|
|
+ :on-success="handleSuccess"
|
|
|
+ :on-error="handleError"
|
|
|
+ :on-remove="handleRemove"
|
|
|
+ :before-upload="beforeAvatarUpload"
|
|
|
+ :on-preview="handlePreview"
|
|
|
+ :file-list="fileList"
|
|
|
+ list-type="picture"
|
|
|
+ accept=".jpg,.jpeg,.png,.JPG,.PNG,.JPEG"
|
|
|
+ with-credentials
|
|
|
+ multiple>
|
|
|
+ <i class="el-icon-upload"></i>
|
|
|
+ <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
|
|
+ <div class="el-upload__tip" slot="tip">支持2M以内的PNG、JPG、JPEG格式的图片，F5、F6需要提供银行流水截图（F5：40W以上薪资；F6：70W以上薪资）</div>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+ <div class="price">
|
|
|
+ <span class="text">￥{{price}}</span>
|
|
|
+ <span class="unit"> /次</span>
|
|
|
+ </div>
|
|
|
+ <div class="buttons">
|
|
|
+ <el-button class="submit" type="primary" @click="submit">确认提交</el-button>
|
|
|
+ </div>
|
|
|
+ <el-dialog :visible.sync="dialogVisible">
|
|
|
+ <img width="100%" :src="dialogImageUrl" alt="">
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import flow from "@/components/flow/flow";
|
|
|
+ import skillCertHeader from "@/components/skill_cert_header/skill_cert_header";
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: "profile",
|
|
|
+ components: {
|
|
|
+ flow, skillCertHeader
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ rules: [{
|
|
|
+ title: '1、认证优势',
|
|
|
+ content: '* 进行过技术认证的用户，将享受平台派单的优先推荐权重' +
|
|
|
+ '<br/>' +
|
|
|
+ '* 技术认证等级标识' +
|
|
|
+ '<br/>' +
|
|
|
+ '* 依据技术等级将有更高的参考薪酬' +
|
|
|
+ '<br/>' +
|
|
|
+ '* 认证4级以上用户有机会被内邀为面试官' +
|
|
|
+ '<br/>' +
|
|
|
+ '* 面试过程中，将与高水平技术官的进行深层次沟通',
|
|
|
+ linkUrl: ''
|
|
|
+ }, {
|
|
|
+ title: '2、等级对照表',
|
|
|
+ content: '《客栈技术等级对照表》',
|
|
|
+ linkUrl: 'https://jishuin.proginn.com/p/763bfbd71939'
|
|
|
+ }, {
|
|
|
+ title: '3、其他',
|
|
|
+ content: '* 最终认证的技术等级以面试官反馈为准' + '<br/>' +
|
|
|
+ '* 认证金额无法退回，请确保已理解以上内容。',
|
|
|
+ linkUrl: ''
|
|
|
+ },],
|
|
|
+ dialogImageUrl: '',
|
|
|
+ dialogVisible: false,
|
|
|
+ levels: [],
|
|
|
+ conditions: [],
|
|
|
+ fields: [],
|
|
|
+ tagsSelected: [],
|
|
|
+ tags: [],
|
|
|
+ flowList: [
|
|
|
+ {
|
|
|
+ active: true,
|
|
|
+ label: '基础信息'
|
|
|
+ }, {
|
|
|
+ active: false,
|
|
|
+ label: '完善简历'
|
|
|
+ }, {
|
|
|
+ active: false,
|
|
|
+ label: '对接面试官'
|
|
|
+ }, {
|
|
|
+ active: false,
|
|
|
+ label: '开始面试'
|
|
|
+ }, {
|
|
|
+ active: false,
|
|
|
+ label: '结束认证'
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ tagText: '',
|
|
|
+ form: {
|
|
|
+ skill: []
|
|
|
+ },
|
|
|
+ fileList: [],
|
|
|
+ level: '',
|
|
|
+ price: ''
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.conditions = [
|
|
|
+ {
|
|
|
+ text: '* 签约程序员客栈',
|
|
|
+ linkName: "去签约",
|
|
|
+ linkUrl: "https://www.proginn.com/sign/new",
|
|
|
+ }, {
|
|
|
+ text: '* 有助于面试官快速了解你',
|
|
|
+ linkName: "完善简历",
|
|
|
+ linkUrl: `/wo/${this.userinfo.uid}`,
|
|
|
+ }, {
|
|
|
+ text: '* 客栈头像为本人露脸照片',
|
|
|
+ linkName: "",
|
|
|
+ linkUrl: "",
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ showPaySuccess() {
|
|
|
+ this.$router.push(`/frontend/skill_cert/resume_improve`);
|
|
|
+ },
|
|
|
+ toLevelsDesc() {
|
|
|
+ window.open(`https://jishuin.proginn.com/p/763bfbd71939`)
|
|
|
+ },
|
|
|
+ onTagSelected(item) {
|
|
|
+ if (this.tagsSelected.find((ele) => {
|
|
|
+ return ele.skill_name === item.skill_name;
|
|
|
+ })) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.tagsSelected.push(item);
|
|
|
+ },
|
|
|
+ onRemoveTag(index) {
|
|
|
+ this.tagsSelected.splice(index, 1);
|
|
|
+ },
|
|
|
+ fieldSelected(id) {
|
|
|
+ this.fields = this.fields.map((ele) => {
|
|
|
+ ele.selected = ele.occupation_id === id;
|
|
|
+ return ele;
|
|
|
+ })
|
|
|
+ this.getSkills()
|
|
|
+ this.getLevels()
|
|
|
+ },
|
|
|
+ onInputChange(value) {
|
|
|
+ if (!value) return;
|
|
|
+ if (this.tagsSelected.find((ele) => {
|
|
|
+ return ele.skill_name === value;
|
|
|
+ })) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.tagsSelected.push({
|
|
|
+ skill_id: 0,
|
|
|
+ skill_name: value
|
|
|
+ });
|
|
|
+ this.tagText = '';
|
|
|
+ },
|
|
|
+ handleLevelChange(value) {
|
|
|
+ const res = this.levels.find((ele) => {
|
|
|
+ return ele.item_id === value
|
|
|
+ });
|
|
|
+ this.price = res.price
|
|
|
+ },
|
|
|
+ handleSuccess(res, file) {
|
|
|
+ this.fileList.push(file);
|
|
|
+ },
|
|
|
+ handleError(err) {
|
|
|
+ console.log(err)
|
|
|
+ },
|
|
|
+ beforeAvatarUpload(file) {
|
|
|
+ const isJPEG = file.type === 'image/jpeg';
|
|
|
+ const isJPG = file.type === 'image/jpg';
|
|
|
+ const isPNG = file.type === 'image/png';
|
|
|
+ const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
+
|
|
|
+ if (!(isJPG || isPNG || isJPEG)) {
|
|
|
+ this.$message.error('上传图片只能是 PNG/JPG/JPEG 格式!');
|
|
|
+ }
|
|
|
+ if (!isLt2M) {
|
|
|
+ this.$message.error('上传图片大小不能超过 2MB!');
|
|
|
+ }
|
|
|
+ return (isJPG || isJPEG || isPNG) && isLt2M;
|
|
|
+ },
|
|
|
+ handleRemove(file, fileList) {
|
|
|
+ const index = this.fileList.indexOf(file);
|
|
|
+ this.fileList.splice(index, 1);
|
|
|
+ },
|
|
|
+ handlePreview(file) {
|
|
|
+ this.dialogImageUrl = file.url;
|
|
|
+ this.dialogVisible = true;
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ if (!this.tagsSelected.length) {
|
|
|
+ this.$message.error('请选择技能标签!');
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!this.level) {
|
|
|
+ this.$message.error('请选择认证等级!');
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!this.fileList.length) {
|
|
|
+ this.$message.error('请上传薪资证明!');
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const form = {
|
|
|
+ product_type: 12,
|
|
|
+ item_id: this.level,
|
|
|
+ occupation_id: this.fields.find((ele) => ele.selected).occupation_id,
|
|
|
+ skill: JSON.stringify(this.tagsSelected),
|
|
|
+ file: this.fileList.map((ele) => ele.response.filename).join(','),
|
|
|
+ };
|
|
|
+ this.$axios.$post(`/uapi/cert/add`, form).then((value) => {
|
|
|
+ location.href = `/pay?product_type=12&product_id=${form.item_id}&next=frontend/skill_cert/resume_improve`;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ async getOccupation() {
|
|
|
+ let res = await this.$axios.$post(`/wapi/pub/occupation`, {type: 2});
|
|
|
+ if (res.data.list && res.data.list.length) {
|
|
|
+ res.data.list[0].selected = true;
|
|
|
+ }
|
|
|
+ this.fields = res.data.list;
|
|
|
+ },
|
|
|
+ async getSkills() {
|
|
|
+ const id = this.fields.find((ele) => ele.selected).occupation_id;
|
|
|
+ let res = await this.$axios.$post(`/wapi/pub/skill`, {occupation_id: id});
|
|
|
+ this.tags = res.data.list;
|
|
|
+ },
|
|
|
+ async getLevels() {
|
|
|
+ const id = this.fields.find((ele) => ele.selected).occupation_id;
|
|
|
+ let res = await this.$axios.$post(`/uapi/pub/freeworklevel`, {occupation_id: id});
|
|
|
+ this.levels = res.data.list.map((ele) => {
|
|
|
+ ele.name += ` ￥${ele.price}`;
|
|
|
+ return ele
|
|
|
+ });
|
|
|
+ if (!this.level && this.levels.length) {
|
|
|
+ this.level = `${this.levels[0].item_id}`
|
|
|
+ }
|
|
|
+ this.price = this.levels.find((ele) => {
|
|
|
+ return ele.item_id === this.level;
|
|
|
+ }).price || '0.00';
|
|
|
+ },
|
|
|
+ async getDetail() {
|
|
|
+ let res = await this.$axios.$post(`/uapi/cert/info`);
|
|
|
+ this.form = res.data;
|
|
|
+ this.flowList = this.flowList.map((ele, index) => {
|
|
|
+ if (index < parseInt(this.form.step)) {
|
|
|
+ ele.selected = true;
|
|
|
+ }
|
|
|
+ return ele;
|
|
|
+ })
|
|
|
+ if (this.form.occupation_id) {
|
|
|
+ this.fields = this.fields.map((ele) => {
|
|
|
+ ele.selected = this.form.occupation_id === ele.occupation_id;
|
|
|
+ return ele;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (this.form.item_id) {
|
|
|
+ this.level = `${this.form.item_id}`;
|
|
|
+ }
|
|
|
+ this.tagsSelected = this.form.skill;
|
|
|
+ if (this.form.img) {
|
|
|
+ this.fileList = this.form.img.split(',').map((ele) => {
|
|
|
+ const arr = ele.split("/")
|
|
|
+ const imageUrl = arr[arr.length - 1]
|
|
|
+ return {
|
|
|
+ name: imageUrl,
|
|
|
+ url: this.form.img,
|
|
|
+ response: {
|
|
|
+ filename: imageUrl
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ bindCallback() {
|
|
|
+ if (this.mobile) {
|
|
|
+ window.showPaySuccess = this.showPaySuccess
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ async mounted() {
|
|
|
+ await this.getOccupation();
|
|
|
+ await this.getDetail();
|
|
|
+ await this.getLevels();
|
|
|
+ await this.getSkills();
|
|
|
+ this.bindCallback();
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .container {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ max-width: 1000px;
|
|
|
+ margin: 10px auto;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 0 85px;
|
|
|
+ @media(max-width: 768px) {
|
|
|
+ padding: 0 15px;
|
|
|
+ }
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .width-infinity {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .description {
|
|
|
+ width: 100%;
|
|
|
+ background: #f4f5f9;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding-bottom: 32px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .rule {
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+
|
|
|
+ .rule-content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin: 16px 14px 0 14px;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ &:not(:first-child) {
|
|
|
+ margin-top: 17px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-title {
|
|
|
+ font-size: 15px;
|
|
|
+ font-family: PingFangSC, PingFangSC-Semibold, sans-serif;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #222222;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-content {
|
|
|
+ margin-top: 5px;
|
|
|
+ font-size: 15px;
|
|
|
+ font-family: PingFangSC, PingFangSC-Regular, sans-serif;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #222222;
|
|
|
+ line-height: 24px;
|
|
|
+
|
|
|
+ &--a {
|
|
|
+ color: var(--linkColor)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .condition {
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin-top: 17px;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ margin-left: 14px;
|
|
|
+ font-size: 15px;
|
|
|
+ font-family: PingFangSC, PingFangSC-Regular, sans-serif;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: left;
|
|
|
+ color: #222222;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .action {
|
|
|
+ margin-left: 28px;
|
|
|
+ margin-right: 14px;
|
|
|
+ font-size: 15px;
|
|
|
+ font-family: PingFangSC, PingFangSC-Semibold, sans-serif;
|
|
|
+ font-weight: 600;
|
|
|
+ text-align: left;
|
|
|
+ color: #308eff;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .col-title {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 43px;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ width: 2px;
|
|
|
+ height: 14px;
|
|
|
+ background: #308eff;
|
|
|
+ border-radius: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .label {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: PingFangSC, PingFangSC-Semibold, sans-serif;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #222222;
|
|
|
+ padding: 0 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .field-selector {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 33px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag-selector {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 23px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+
|
|
|
+ .tag-input {
|
|
|
+ width: 200px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .selector-title {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC, PingFangSC-Semibold, sans-serif;
|
|
|
+ font-weight: 600;
|
|
|
+ text-align: left;
|
|
|
+ color: #222222;
|
|
|
+ line-height: 20px;
|
|
|
+ margin-right: 16px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ height: 38px;
|
|
|
+ background: #308eff;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 0 10px;
|
|
|
+ margin-right: 7px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &--disabled {
|
|
|
+ cursor: not-allowed;
|
|
|
+ pointer-events: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ &--unchecked {
|
|
|
+ opacity: 0.8;
|
|
|
+ background: #f4f5f9;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC, PingFangSC-Regular, sans-serif;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+
|
|
|
+ &--unchecked {
|
|
|
+ opacity: 0.8;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ margin-left: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tags {
|
|
|
+ display: flex;
|
|
|
+ align-content: flex-start;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ width: 100%;
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px solid #d7dfe8;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 20px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .level-selector {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 12px;
|
|
|
+
|
|
|
+ .action {
|
|
|
+ margin-left: 15px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC, PingFangSC-Medium, sans-serif;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #308eff;
|
|
|
+ line-height: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-title {
|
|
|
+ margin-top: 51px;
|
|
|
+ margin-bottom: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price {
|
|
|
+ display: flex;
|
|
|
+ align-items: baseline;
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 42px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-size: 30px;
|
|
|
+ font-family: DIN Alternate, sans-serif;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #ff6600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .unit {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: PingFangSC, PingFangSC-Regular, sans-serif;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #ff6600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .buttons {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .submit {
|
|
|
+ margin-bottom: 87px;
|
|
|
+ width: 267px;
|
|
|
+ height: 58px;
|
|
|
+ background: #308eff;
|
|
|
+ border-radius: 8px;
|
|
|
+
|
|
|
+ font-size: 18px;
|
|
|
+ font-family: PingFangSC, PingFangSC-Medium, sans-serif;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 26px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
