296 lines
7.1 KiB
Vue
296 lines
7.1 KiB
Vue
|
<template>
|
||
|
|
<view class="pc-home">
|
||
|
|
<view class="main-content" :style="{backgroundImage: `url(${staticIp+backgroundImage})`}">
|
||
|
|
<view class="mc-left">
|
||
|
|
<view class="mcl-out">
|
||
|
|
<view class="mcl-top">
|
||
|
|
自由的Ai图像重绘服务
|
||
|
|
<br />
|
||
|
|
图像识别与替换
|
||
|
|
</view>
|
||
|
|
<view class="mcl-bottom">
|
||
|
|
自由绘制 | 自动识别 | 无限扩展
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="mc-right">
|
||
|
|
<view class="mcr-card">
|
||
|
|
<el-upload class="mcr-upload" drag action="#" :auto-upload="false" ref="uploadCover"
|
||
|
|
:multiple="false" accept="image/*" list-type="picture" :on-change="uploadFile">
|
||
|
|
<image src="/static/upload-image.png"></image>
|
||
|
|
</el-upload>
|
||
|
|
<view class="mcr-tip">点击或拖拽图片到这里</view>
|
||
|
|
<view class="mcr-show">
|
||
|
|
<view class="mcrs-item" v-for="(item,index) in getForeWorkList" :key="index"
|
||
|
|
:title="item.serviceName||'暂无'">
|
||
|
|
<image class="work-module" :src="getImagePath(item.path)"></image>
|
||
|
|
<view class="work-todo">
|
||
|
|
<image :src="fileUrl+magicWand"></image>
|
||
|
|
<text>做同款</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="main-content">
|
||
|
|
<Second />
|
||
|
|
</view>
|
||
|
|
<u-toast ref="uToast"></u-toast>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import Second from './components/second.vue';
|
||
|
|
import configService from '@/common/config.service.js';
|
||
|
|
export default {
|
||
|
|
components:{
|
||
|
|
Second
|
||
|
|
},
|
||
|
|
data(){
|
||
|
|
return{
|
||
|
|
// 基础路径
|
||
|
|
staticIp: configService.ip,
|
||
|
|
fileUrl: configService.fileUrl + 'pixel/home/',
|
||
|
|
// 背景图片
|
||
|
|
backgroundImage: 'static/pixel/pc/home/background.png',
|
||
|
|
// 推荐作品列表
|
||
|
|
workList: [],
|
||
|
|
// 默认推荐作品
|
||
|
|
defaultWorkList: [
|
||
|
|
{path: "http://guojunjie.oss-cn-hangzhou.aliyuncs.com/20241227/173529161311570.jpg?Expires=1737119003&OSSAccessKeyId=LTAI5tFAiAq9SjM9vaucMuYD&Signature=rbGd4zWKvzlRDgl5fLzETD0epgg%3D"},
|
||
|
|
{path: "https://guojunjie.oss-cn-hangzhou.aliyuncs.com/upload/sample/1734970091260.jpg"},
|
||
|
|
{path: "https://guojunjie.oss-cn-hangzhou.aliyuncs.com/upload/sample/1734970072585.jpg"},
|
||
|
|
{path: "http://guojunjie.oss-cn-hangzhou.aliyuncs.com/20241227/1735277872644388.jpg?Expires=1737105263&OSSAccessKeyId=LTAI5tFAiAq9SjM9vaucMuYD&Signature=w7koLjcj2ePK5dGkxgMgn4pxkOw%3D"},
|
||
|
|
],
|
||
|
|
// 魔术棒
|
||
|
|
magicWand: 'magic-wand.png',
|
||
|
|
// 推荐作品表单
|
||
|
|
recommendForm: {
|
||
|
|
current: 1,
|
||
|
|
size: 10,
|
||
|
|
isFinish: true,
|
||
|
|
total: 0
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
getForeWorkList(){
|
||
|
|
let iIndex = 0;
|
||
|
|
while(this.workList.length <= 3){
|
||
|
|
this.workList.push(this.defaultWorkList[iIndex]);
|
||
|
|
iIndex++;
|
||
|
|
}
|
||
|
|
return this.workList.slice(0,4);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
// 初始化
|
||
|
|
init(){
|
||
|
|
this.recommendForm = {current: 1,size: 10,isFinish: false,total: 0};
|
||
|
|
this.getWorkList();
|
||
|
|
},
|
||
|
|
// 图片地址格式化
|
||
|
|
getImagePath(path){
|
||
|
|
if(path){
|
||
|
|
return path.includes("://") ? path : encodeURI(this.staticIp+path);
|
||
|
|
}else{
|
||
|
|
return '';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 获取推荐作品列表
|
||
|
|
async getWorkList(){
|
||
|
|
if(this.recommendForm.isFinish) return;
|
||
|
|
let res = await this.$api.getRecommend(this.recommendForm);
|
||
|
|
if(res?.success){
|
||
|
|
const { records, total, current, size } = res.data;
|
||
|
|
const result = records;
|
||
|
|
if(current === 1){
|
||
|
|
this.workList = result;
|
||
|
|
}else{
|
||
|
|
this.workList.push(...result);
|
||
|
|
}
|
||
|
|
this.recommendForm.total = total;
|
||
|
|
this.recommendForm.isFinish = current*size >= total;
|
||
|
|
this.$forceUpdate();
|
||
|
|
}else{
|
||
|
|
this.workList = this.defaultWorkList;
|
||
|
|
this.$refs.uToast.show({type:'error',title: "推荐作品获取失败!"});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 首页上传文件
|
||
|
|
uploadFile(file, fileList){
|
||
|
|
this.$refs.uploadCover.clearFiles();
|
||
|
|
const size = file.size / 1024; // 计算文件大小
|
||
|
|
if(size<5 || (size/1024)>5){
|
||
|
|
this.$refs.uToast.show({type: 'warning',title: "请上传大小为5KB~5MB的图片!"});
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
let isAccept = new RegExp('image/*').test(file.raw.type)
|
||
|
|
if (!isAccept) {
|
||
|
|
this.$refs.uToast.show({type: 'warning',title: "图片上传格式错误!"});
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
// this.form.coverPath = file;
|
||
|
|
// this.fileList[0] = file;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.init();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.pc-home{
|
||
|
|
.main-content {
|
||
|
|
width: 100%;
|
||
|
|
min-height: 73.5em;
|
||
|
|
background-size: cover;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
display: flex;
|
||
|
|
aspect-ratio: 16/9 !important;
|
||
|
|
|
||
|
|
.mc-left {
|
||
|
|
margin-top: 15%;
|
||
|
|
flex: 1;
|
||
|
|
height: 60%;
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
.mcl-out {
|
||
|
|
margin-left: 40%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
|
||
|
|
// width: 740rpx;
|
||
|
|
.mcl-top {
|
||
|
|
color: #12121f;
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 100rpx;
|
||
|
|
line-height: 150rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mcl-bottom {
|
||
|
|
margin-top: 48rpx;
|
||
|
|
color: #959ba6;
|
||
|
|
font-size: 38rpx;
|
||
|
|
font-family: fangsong;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mc-right {
|
||
|
|
margin-top: 13%;
|
||
|
|
flex: 1;
|
||
|
|
|
||
|
|
.mcr-card {
|
||
|
|
overflow: hidden;
|
||
|
|
border-radius: 30rpx;
|
||
|
|
margin-left: 5%;
|
||
|
|
min-height: 1100rpx;
|
||
|
|
width: 1400rpx;
|
||
|
|
background-color: #fff;
|
||
|
|
aspect-ratio: 23/18;
|
||
|
|
box-shadow: 0 5rpx 10rpx 0 #dcdae4;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
&:hover{
|
||
|
|
box-shadow: 0 0 25rpx #eee;
|
||
|
|
}
|
||
|
|
.mcr-upload{
|
||
|
|
margin-top: 120rpx;
|
||
|
|
::v-deep .el-upload-dragger{
|
||
|
|
width: 450rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
background-color: #f5f6f9;
|
||
|
|
border-radius: 30rpx;
|
||
|
|
&:hover{
|
||
|
|
border-color: #959ba6;
|
||
|
|
image{
|
||
|
|
width: 160rpx;
|
||
|
|
height: 128rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&:active{
|
||
|
|
border-color: #959ba6;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
image{
|
||
|
|
transition: 0.5s;
|
||
|
|
width: 140rpx;
|
||
|
|
height: 112rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.mcr-tip{
|
||
|
|
font-size: 58rpx;
|
||
|
|
margin: 50rpx;
|
||
|
|
}
|
||
|
|
.mcr-show{
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
.mcrs-item{
|
||
|
|
overflow: hidden;
|
||
|
|
position: relative;
|
||
|
|
margin: 10rpx 40rpx;
|
||
|
|
border-radius: 12rpx;
|
||
|
|
.work-module{
|
||
|
|
width: 240rpx;
|
||
|
|
height: 330rpx;
|
||
|
|
border-radius: 12rpx;
|
||
|
|
box-shadow: 0 0 10rpx #959ba6;
|
||
|
|
opacity: 0.85;
|
||
|
|
}
|
||
|
|
.work-todo{
|
||
|
|
width: 240rpx;
|
||
|
|
height: 80rpx;
|
||
|
|
padding-left: 34rpx;
|
||
|
|
position: absolute;
|
||
|
|
z-index: 1;
|
||
|
|
border-radius: 8rpx 8rpx 12rpx 12rpx;
|
||
|
|
bottom: -80rpx;
|
||
|
|
left: 0;
|
||
|
|
background-color: rgba(0, 0, 0, 0.3);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
font-size: 35rpx;
|
||
|
|
transition: 0.5s;
|
||
|
|
cursor: pointer;
|
||
|
|
text{
|
||
|
|
font-weight: bold;
|
||
|
|
background-image: linear-gradient(to right, #cdfbf2 0%, #a3d4ff 100%);
|
||
|
|
background-clip: text;
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
-webkit-text-fill-color: transparent;
|
||
|
|
}
|
||
|
|
image{
|
||
|
|
margin-right: 10rpx;
|
||
|
|
width: 40rpx;
|
||
|
|
height: 40rpx;
|
||
|
|
}
|
||
|
|
&:hover{
|
||
|
|
opacity: 0.8;
|
||
|
|
}
|
||
|
|
&:active{
|
||
|
|
opacity: 0.6;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&:hover{
|
||
|
|
.work-todo{
|
||
|
|
bottom: 6rpx;
|
||
|
|
}
|
||
|
|
.work-module{
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|