talent_map/pc/pages/policy/footprint.vue

<template>
	
	<div>
	    <!-- tab -->
	    <el-tabs v-model="currentTab" :stretch="false" @tab-click="changeTab">
	    	<el-tab-pane :label="item.name" v-for="(item, index) in typeList" :key="index">
	    	</el-tab-pane>
	    </el-tabs>
	 <!--   <u-tabs :list="typeList" :is-scroll="false" :bold="true" active-color="#DD4250" height="80" font-size="28"
	        :current="currentTab" @change="changeTab" /> -->
	    <!-- 我是人才 -->
	    <div class="p-70 p-t-40 talent-tab" v-if="currentTab == 0">
	        <div class="flex-col col-center">
	            <div class="title">您所从事的行业:</div>
	            <nuxt-link :to="'/pages/policy/talent'" class="m-t-40" v-for="(item,index) in talentTypeList" :key="index">
	                <img :src="item.image" mode="widthFix"></img>
	            </nuxt-link>
	        </div>
	    </div>
	    <!-- 我是企业 -->
	    <div v-if="currentTab == 1">
	        <div class="huodong-details">
	
	            <div class="p-30 ">
	                <div class="detail-title">
	                    一、企业基本信息
	                </div>
	                <div class="content-box bg-white m-t-30">
	                    <div class="detail-cell row-between u-border-bottom">
	                        <div class="width75">
	                            企业名称
	                        </div>
	                        <div class="text-right flex-1">
	                            <input type="text" v-model="info.title" placeholder="请输入">
	                        </div>
	                    </div>
	                    <div class="detail-cell row-between u-border-bottom">
	                        <div class="bold">
	                            企业成立日期
	                        </div>
	                        <div class="text-right flex-1">
	                            <input type="text" v-model="info.title" placeholder="请输入">
	                        </div>
	                    </div>
	                    <div class="detail-cell row-between u-border-bottom">
	                        <div class="bold">
	                            企业注册地
	                        </div>
	                        <div class="text-right flex-1">
	                            <input type="text" v-model="info.title" placeholder="请输入">
	                        </div>
	                    </div>
	                    <div class="detail-cell row-between u-border-bottom">
	                        <div class="bold">
	                            企业实际经营地
	                        </div>
	                        <div class="text-right flex-1">
	                            <input type="text" v-model="info.title" placeholder="请输入">
	                        </div>
	                    </div>
	                    <div class="detail-cell row-between u-border-bottom">
	                        <div class="bold">
	                            企业有效l类知识产权数
	                        </div>
	                        <div class="text-right flex-1">
	                            <input type="text" v-model="info.title" placeholder="请输入">
	                        </div>
	                    </div>
	                    <div class="detail-cell row-between u-border-bottom">
	                        <div class="bold" style="width: 400rpx;">
	                            有效、高企认定中未使用过的II类知识产权数
	                        </div>
	                        <div class="text-right flex-1">
	                            <input type="text" v-model="info.title" placeholder="请输入">
	                        </div>
	                    </div>
	                    <div class="detail-cell row-between u-border-bottom">
	                        <div class="bold">
	                            知识产权获取方式
	                        </div>
	                        <div class="text-right flex-1">
	                            <input type="text" v-model="info.title" placeholder="请输入">
	                        </div>
	                    </div>
	                    <div class="detail-cell row-between u-border-bottom">
	                        <div class="bold" style="width: 400rpx;">
	                            企业参与编制国家标准、行业标准检测方法、技术规范的情况
	                        </div>
	                        <div class="text-right flex-1">
	                            <input type="text" v-model="info.title" placeholder="请输入">
	                        </div>
	                    </div>
	                    <div class="detail-cell row-between u-border-bottom">
	                        <div class="bold flex" style="width: 400rpx;">
	                            <div>科技成果数</div>
	                            <div class="m-l-8 m-r-8 primary" style="font-size: 20rpx;">科技成果数有效期提示</div>
	                            <i class="el-icon-info"></i>
	
	                        </div>
	                        <div class="text-right flex-1">
	                            <input type="text" v-model="info.title" placeholder="请输入">
	                        </div>
	                    </div>
	                </div>
	
	                <div class="detail-title m-t-30">
	                    二、研发组织管理水平评测(多选)
	                </div>
	                <div class="content-box m-t-30  bj-w ">
	
	                    <!-- <u-checkbox-group shape="circle" active-color="#DD4250" wrap="true"
	                        @change="checkboxGroupChange">
	                        <div class="m-t-15 m-b-15" v-for="(item, index) in testList" :key="index">
	                            <u-checkbox @change="checkboxChange" v-model="item.checked"
	                                :name="item.name">{{item.name}}</u-checkbox>
	                        </div>
	                    </u-checkbox-group> -->
	                </div>
	
	                <div class="detail-title m-t-30">
	                    三、企业成长性评测
	                </div>
	                <div class="content-box m-t-30  bj-w ">
	                    <div class="detail-title p-t-30">
	                        第一年
	                    </div>
	                    <div class="detail-cell row-between ">
	                        <div class="bold">
	                            净资产（万元）
	                        </div>
	                        <div class="text-right flex-1">
	                            <input type="text" v-model="info.title" placeholder="请输入">
	                        </div>
	                    </div>
	                    <div class="detail-cell row-between u-border-bottom">
	                        <div class="bold">
	                            销售收入（万元）
	                        </div>
	                        <div class="text-right flex-1">
	                            <input type="text" v-model="info.title" placeholder="请输入">
	                        </div>
	                    </div>
	                    <div class="detail-title p-t-30">
	                        第二年
	                    </div>
	                    <div class="detail-cell row-between ">
	                        <div class="bold">
	                            净资产（万元）
	                        </div>
	                        <div class="text-right flex-1">
	                            <input type="text" v-model="info.title" placeholder="请输入">
	                        </div>
	                    </div>
	                    <div class="detail-cell row-between u-border-bottom">
	                        <div class="bold">
	                            销售收入（万元）
	                        </div>
	                        <div class="text-right flex-1">
	                            <input type="text" v-model="info.title" placeholder="请输入">
	                        </div>
	                    </div>
	                    <div class="detail-cell row-between u-border-bottom">
	                        <div class="bold">
	                            验证码
	                        </div>
	                        <div class="text-right flex-1 flex row-right">
	                            <input type="text" v-model="info.title" placeholder="请输入">
	                            <img src="https://jiangzi.xin/coffee/login/captcha?" mode="heightFix" style="height: 54rpx;" class=m-l-10></img>
	                        </div>
	                    </div>
	
	
	                </div>
	            </div>
	
	            <div class="footer">
	                <el-button type="primary" class="white btn lg" @click="handleConsult">提交</el-button>
	            </div>
	
	          
	        </div>
	    </div>
	</div>
</template>

<script>
	import {
	    mapState
	} from 'vuex'
	export default {
	    head() {
	    	return {
	    		title: this.$store.getters.headTitle,
	    		link: [{
	    			rel: 'icon',
	    			type: 'image/x-icon',
	    			href: this.$store.getters.favicon,
	    		}, ],
	    	}
	    },
	    
	    layout: 'policy',
	    data() {
	        return {
	            typeList: [{
	                name: '我是人才',
	            }, {
	                name: '我是企业',
	            }],
	            currentTab: 0,
	            talentTypeList: [{
	                'image': '/static/images/type-1.png'
	            }, {
	                'image': '/static/images/type-2.png'
	            }, {
	                'image': '/static/images/type-3.png'
	            }, {
	                'image': '/static/images/type-4.png'
	            }, ],
	
	            info: {
	                category_id: 0,
	                title: '',
	                tel: '',
	                address: '',
	                chain: '',
	                module: '',
	                intro: '',
	                principal: '',
	            },
	
	            testList: [{
	                    name: '1、制定了企业研究开发的组织管理制度',
	                },
	                {
	                    name: '2、建立了研发投入核算体系',
	                },
	                {
	                    name: '3、编制了研发费用辅组账',
	                },
	                {
	                    name: '4、设立了内部科学技术研究开发机构并具备相应的科技',
	                },
	                {
	                    name: '5、与国内外研究开发机构开展多种形式产学研合作',
	                }
	            ],
	            top: 172
	        }
	    },
	    created() {
	        // this.getHomeFun();
	        // this.getUser();
	    },
	    methods: {
	        // ...mapActions(['getUser']),
	        // 改变当前的Tabs位置
	        changeTab(index) {
	            this.currentTab = index;
	        },
	        handleConsult(){
	            // uni.navigateTo({
	            //     url: '/pages/policy/score'
	            // })
	        },
	    },
	    computed: {
	
	        ...mapState(['config']),
	    }
	}
</script>

<style lang="scss" scoped>
    .huodong-details {
        padding-bottom: calc(200rpx + env(safe-area-inset-bottom));
    }

    .details-images {
        height: 408rpx;
        border-radius: 20rpx;
        overflow: hidden;
        width: 100%;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .detail-title {
        // font-size: 36rpx;
        font-weight: bold;
        // padding: 30rpx 0;
    }

    .detail-cell {
        display: flex;
        // align-items: center;
        padding: 30rpx 0;

        .cell-img {
            padding: 5rpx 0;

            img {
                width: 48rpx;
                height: 48rpx;
                display: block
            }
        }

    }

    // .muted {
    //     color: #989898;
    //     padding-left: 10rpx;
    // }

    .detail-biaoti {
        // font-size: 36rpx;
        height: 88rpx;
        line-height: 88rpx;
    }

    .bj-w {
        background-color: #fff;
    }

    .padding-30 {
        padding: 0 30rpx !important;

    }

    .content-box {
        padding: 0 24rpx;
        box-shadow: 0rpx 8rpx 16rpx 2rpx rgba(0, 0, 0, 0.03);
        border-radius: 12rpx 12rpx 12rpx 12rpx;

        input {
            font-size: 28rpx;
        }

        textarea {
            width: 100%;
            height: 100rpx;
            font-size: 28rpx;
        }
    }

    .btn-r-border {
        position: relative;

        &::after {
            content: ' ';
            width: 1rpx;
            height: 36rpx;
            background-color: #CCCCCC;
            right: 0;
            top: 50%;
            margin-top: -18rpx;
            position: absolute;
        }
    }

    .width75 {
        width: 150rpx;
        font-weight: bold;
    }
    .footer {
        left: 0%;
        bottom: 150rpx;
        width: 100%;
        padding: 0 24rpx;
        position: fixed;
        z-index: 99;

        .btn {
            height: 84rpx;
            line-height: 84rpx;
            background-color: $--color-primary;
            box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(243, 113, 113, 0.39);
            border-radius: 18rpx 18rpx 18rpx 18rpx;
        }
    }

    page {
        padding: 0;
    }

    .talent-tab {
        .title {
            font-size: 36rpx;
            font-weight: 400;
            color: #333333;
        }
    }
</style>