107 lines
1.9 KiB
Vue
107 lines
1.9 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<el-container class="pc-container">
|
||
|
|
<view class="pc-header">
|
||
|
|
<Header />
|
||
|
|
</view>
|
||
|
|
<view style="width: 100%;height: 100rpx;"></view>
|
||
|
|
<view class="pc-main">
|
||
|
|
<view class="main-content" :style="{height: WindowHeight-50 + 'px'}">
|
||
|
|
<view class="mc-left">
|
||
|
|
<view class="mcl-out">
|
||
|
|
<view class="mcl-top">
|
||
|
|
自由的Ai图像重绘服务图像识别与替换
|
||
|
|
</view>
|
||
|
|
<view class="mcl-bottom">
|
||
|
|
自由绘制 | 自动识别 | 无线扩展
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="mc-right">
|
||
|
|
<view class="mcr-card">
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</el-container>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import Header from './components/header.vue';
|
||
|
|
export default {
|
||
|
|
components:{
|
||
|
|
Header
|
||
|
|
},
|
||
|
|
data(){
|
||
|
|
return{
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.pc-container{
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
.pc-header{
|
||
|
|
width: 100%;
|
||
|
|
height: 100rpx;
|
||
|
|
box-shadow: 0 5rpx 10rpx 0 #dcdae4;
|
||
|
|
position: fixed;
|
||
|
|
}
|
||
|
|
.pc-main{
|
||
|
|
background-color: #edecf1;
|
||
|
|
.main-content{
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-image: url('http://8.138.171.103/static/homeBackground.png');
|
||
|
|
background-size: cover;
|
||
|
|
display: flex;
|
||
|
|
overflow-x: scroll;
|
||
|
|
.mc-left{
|
||
|
|
margin-top: 11%;
|
||
|
|
flex: 1;
|
||
|
|
height: 60%;
|
||
|
|
display: flex;
|
||
|
|
.mcl-out{
|
||
|
|
margin-left: 20%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
width: 650rpx;
|
||
|
|
.mcl-top{
|
||
|
|
color: #12121f;
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 65rpx;
|
||
|
|
line-height: 100rpx;
|
||
|
|
}
|
||
|
|
.mcl-bottom{
|
||
|
|
margin-top: 30rpx;
|
||
|
|
color: #959ba6;
|
||
|
|
font-size: 30rpx;
|
||
|
|
font-family: fangsong;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.mc-right{
|
||
|
|
margin-top: 10%;
|
||
|
|
flex: 1;
|
||
|
|
height: 45%;
|
||
|
|
.mcr-card{
|
||
|
|
border-radius: 30rpx;
|
||
|
|
margin-left: 5%;
|
||
|
|
// height: 100%;
|
||
|
|
height: 26em;
|
||
|
|
width: 33em;
|
||
|
|
background-color: #fff;
|
||
|
|
// aspect-ratio: 22/17;
|
||
|
|
box-shadow: 0 5rpx 10rpx 0 #dcdae4;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|