<!--
 * @FilePath: \wang-vue-work\src\views\activationStepItem\serverInformation.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-01-14 09:36:04
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<!--  -->
<template>
<div class='sever'>

    <ul class="select-box">
        <li class="select-item windows" @click="okserver('windows')">
            <div>
                <!-- <el-image :src="src"></el-image>
                 -->
                 <div class="windows-class">
                    <svg-icon icon-class="windows"  class-name='windows-class' />
                 </div>
                 
                 <h4>windows</h4>
                
            </div>
        </li>
        <li class="select-item linux" @click="okserver('linux')">
            <div>
                <svg-icon icon-class="linux"  class-name='linux-class' />
                 <h4>linux</h4>
            </div>
        </li>
    </ul>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {

}
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
//生命周期 - 创建之前
beforeCreate() {

},
//生命周期 - 挂载之前
beforeMount() {

},
//生命周期 - 更新之前
beforeUpdate() {

}, 
//生命周期 - 更新之后
updated() {

}, 
//生命周期 - 销毁之前
beforeDestroy() {

},
//生命周期 - 销毁完成
destroyed() {

},
//如果页面有keep-alive缓存功能，这个函数会触发
activated() {

},
//方法集合
methods: {
    okserver(name){
        console.log(name);
        this.$emit('next')
    }
}
}
</script>
<style scoped>
.sever{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.select-box{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 80%;
    padding: 0;
    padding-top: 50px;
    
}
.select-item{
    padding: 20px;
    list-style: none;
    border-radius: 20px;
    border: 1px solid #8a8a8a;
    /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) */
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) */
}

.select-item:hover {
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) */
    border: 1px solid #409EFF;
    cursor: pointer
}
.select-item:hover .windows-class,
.select-item:hover .linux-class{
    fill: #409EFF;
}
.select-item h4{
    margin: 0;
    margin-top:30px;
    text-align: center;
}
.windows-class{
    width: 200px;
    height: 200px;
}
.linux-class{
    width: 200px;
    height: 200px;
}
</style>