study
/
简历.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
    <style>
        *{ margin: 0; padding: 0;}
        #left{ margin-left: 10%; width: 500px;}
        #left h1{text-align: center;}
        #left div{ padding-top: 20px;}
        .centerdiv{
            position: absolute;
            left: 40%;
            top: 0;
            height: 500px;
            width:50px;
            border-right: 1px solid black;
            padding-bottom:300px;  /*关键*/
            margin-bottom:-300px;  /*关键*/
         }

        #right{
            position: absolute;
            right: 15%;
            top: 0;
            width: 500px;
            height: 600px;
        }
        #right h1{text-align: center; }
        #img{
            height: 120px;
            width: 500px;
        }
        #right img{ width: 100px; height: 100px;}

        .ra{border-radius: 50%;}
        .zhi{border-radius: 0;}
        .left{position: absolute; left: 0;}
        .right{position: absolute; right: 0;}
        .center{position:absolute; right: 150px;}

        #right div{ padding-top: 20px;}
    </style>
</head>
<body>
    <div id="app">
        <div id="left">
            <h1>请填写简历信息</h1>
            <div>
                照片：<input type="text" v-model="imgsrc">
                <button @click="Rd">圆角</button>
                <button @click="Zhi">直角</button>
                <button @click="Left">居左</button>
                <button  @click="Center">居中</button>
                <button @click="Right">居右</button>
            </div>
            <div>姓名：<input type="text" v-model="name"></div>
            <div>个人简介：</div>

            <textarea v-model="msg"  cols="30" rows="10"></textarea>
            <p>在校期间学分获取：</p>
            <div>javascript: <input type="text" v-model.number="js"></div>
            <div>Webpack: <input type="text"  v-model.number="wb"></div>
            <div>技术栈：</div>
            <textarea  v-model="jszs" @keyup.enter="add" cols="30" rows="10"></textarea>
            <div>是否参加过比赛：
                <input type="radio"  v-model="e" value="yes">是
                <input type="radio"  v-model="e" value="no">否
            </div>
            <div v-if="e==='yes'">请描述参赛项目及名次：<input type="text" v-model="h"></div>
            <div>简历背景色设置：<input type="color" v-model="col"></div>
        </div>
        <div class="centerdiv"></div>

        <div id="right" :style="{background:col}">
            <h1>我的简历</h1>

            <div id="img">
                  <img :src="imgsrc" alt="照片" :class="{ra:ra,zhi:zhi,left:left,right:right,center:center}" >
           </div>

            <div>姓名: {{name}}</div>
            <div>个人简介：{{msg}}</div>
            <div>在校期间总学分:{{count}}</div>
            <div>我的技术栈：</div>
            <div>
                <ul>
                    <transition-group
                    name="custom"
                    enter-active-class="animated fadeInLeftBig"
                    leave-active-class="animated fadeOutRight"
                    >

                    <technology v-for="(item, index) in jsz"
                               :key="index"
                               :content='item'>
                   </technology>
                </transition-group>
                </ul>
            </div>


            <div>我的获奖:{{h}}</div>

        </div>
    </div>
</body>
    <script>
        Vue.component("technology",{
            props:['content'],
            template:` <li>{{content}}</li>`,

        })

        let app= new Vue({
            el:'#app',
            data:{
                imgsrc:'',
                name:'',
                msg:'',
                js:'',
                wb:'',
                col:'',
                ra:false,
                zhi:false,
                left:false,
                right:false,
                center:false,
                jszs:'',
                jsz:[],
                e:'',
                h:''
            },
            computed:{
                count:function(){
                    return  this.js+this.wb
                }
            },

            methods: {
                Rd:function(){
                    this.zhi=false
                    this.ra=true
                },
                Zhi:function(){
                    this.zhi=true
                },
                Left:function(){
                    this.right=false
                    this.left=true
                },
                Center:function(){
                    this.left=false
                    this.center=true
                },
                Right:function(){
                    this.left=false
                    this.center=false
                    this.right=true
                },
                add:function(){
                let arr=this.jszs.split('\n')
                arr.pop()
                this.jsz=arr
                }
            },
        })
    </script>
</html>