Skip to content

A
ai_web_page_prod
Commit 1d1efc5c by haojie
Options

1

parent 59cb9434
Showing with 121 additions and 55 deletions
src/pages/CreationRecord/components/ImageViewer.vue
<template> <template>
<div class="tdesign-demo-image-viewer__base"> <div class="tdesign-demo-image-viewer__base">
<t-image-viewer :images="[img]"> <t-image-viewer :images="[img]" :closeOnOverlay="true">
<template #trigger="{ open }"> <template #trigger="{ open }">
<div class="tdesign-demo-image-viewer__ui-image"> <div class="tdesign-demo-image-viewer__ui-image">
<img <img
......
src/pages/Home/components/HomeSwiper/swiper.vue
<template> <template>
<div class=""> <div class="custom-home-swiper">
<div class="custom-home-swiper"> <div class="swiper-button-prev swiper-button-white prev-next">
<div class="swiper-button-prev swiper-button-white prev-next"> <img :src="imgs.prev" alt="" />
<img :src="imgs.prev" alt="" /> </div>
</div> <!--
<!--
--> -->
<Swiper <Swiper
class="swiper-no-swiping" class="swiper-no-swiping"
:slidesPerView="4" :slidesPerView="4"
:loop="true" :loop="true"
:centeredSlides="false" :centeredSlides="false"
:loopAdditionalSlides="2" :loopAdditionalSlides="2"
:preventClicksPropagation="true" :preventClicksPropagation="true"
:loopFillGroupWithBlank="true" :loopFillGroupWithBlank="true"
:modules="modules" :modules="modules"
:navigation="{ :navigation="{
nextEl: '.swiper-button-next', nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev', prevEl: '.swiper-button-prev',
}" }"
:autoplay="{ :autoplay="{
delay: 2000, delay: 2000,
stopOnLastSlide: false, stopOnLastSlide: false,
disableOnInteraction: false, disableOnInteraction: false,
}" }"
> >
<!-- @click="goDetail(item)" --> <!-- @click="goDetail(item)" -->
<SwiperSlide v-for="(item, index) in ScrollList.list" :key="index"> <SwiperSlide v-for="(item, index) in ScrollList.list" :key="index">
<CustomCardTwo <CustomCardTwo
@click="goDetail(item)" @click="goDetail(item)"
:img="item.image" :img="item.image"
:title="item.title" :title="item.title"
:content="item.description" :content="item.description"
></CustomCardTwo> ></CustomCardTwo>
</SwiperSlide> </SwiperSlide>
</Swiper> </Swiper>
<div class="swiper-button-next swiper-button-white prev-next"> <div class="swiper-button-next swiper-button-white prev-next">
<img :src="imgs.next" alt="" /> <img :src="imgs.next" alt="" />
</div>
</div> </div>
</div> </div>
</template> </template>
......
src/pages/Home/index.less
...@@ -3,4 +3,7 @@ ...@@ -3,4 +3,7 @@
margin: @page-padding-top 0 30px 0; margin: @page-padding-top 0 30px 0;
margin-top: 0; margin-top: 0;
padding-top: @page-padding-top; padding-top: @page-padding-top;
.recommend-parent {
position: relative;
}
} }
src/pages/Home/index.tsx
import { defineComponent, onMounted, reactive } from 'vue'; import { defineComponent, onMounted, reactive, ref } from 'vue';
import HomeSwiper from './components/HomeSwiper/swiper.vue'; import HomeSwiper from './components/HomeSwiper/swiper.vue';
import './index.less'; import './index.less';
import ModuleCard from '@/components/modulecard.vue'; import ModuleCard from '@/components/modulecard.vue';
import { getScenariosRecommend } from '@/utils/api/scenes'; import { getScenariosRecommend } from '@/utils/api/scenes';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { TASKTYPE } from '@/utils/api/Task'; import { TASKTYPE } from '@/utils/api/Task';
import CustomLoading from '@/components/custom/loading2.vue';
export default defineComponent({ export default defineComponent({
setup() { setup() {
const router = useRouter(); const router = useRouter();
const loading = ref(false);
const CardList = reactive({ const CardList = reactive({
list: [] as any, list: [] as any,
}); });
const getRecommend = async () => { const getRecommend = async () => {
try { try {
loading.value = true;
const res: any = await getScenariosRecommend(); const res: any = await getScenariosRecommend();
if (res.code == 0) { if (res.code == 0) {
CardList.list = res.data; CardList.list = res.data;
} }
loading.value = false;
console.log(res.data); console.log(res.data);
} catch (e) { } catch (e) {
loading.value = false;
console.log(e); console.log(e);
} }
}; };
...@@ -46,14 +51,15 @@ export default defineComponent({ ...@@ -46,14 +51,15 @@ export default defineComponent({
getRecommend(); getRecommend();
}); });
return () => ( return () => (
<div> <div class="swiper-box">
<div class="swiper-box"> <HomeSwiper></HomeSwiper>
<HomeSwiper></HomeSwiper> <div class="recommend-parent">
<ModuleCard <ModuleCard
label="推荐工具" label="推荐工具"
list={CardList.list} list={CardList.list}
onChange={onChange} onChange={onChange}
></ModuleCard> ></ModuleCard>
<CustomLoading v-show={loading.value}></CustomLoading>
</div> </div>
</div> </div>
); );
......
src/pages/ImageGeneration/index.vue
...@@ -78,6 +78,7 @@ ...@@ -78,6 +78,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="help"></div>
<CustomLoading v-show="loading"></CustomLoading> <CustomLoading v-show="loading"></CustomLoading>
</div> </div>
</template> </template>
...@@ -339,9 +340,12 @@ onBeforeUnmount(() => { ...@@ -339,9 +340,12 @@ onBeforeUnmount(() => {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; text-align: center;
.generation-box-parent { .generation-box-parent {
width: 100%; width: 100%;
display: inline-block;
vertical-align: middle;
margin: 0 auto;
.generation-box { .generation-box {
width: 100%; width: 100%;
display: flex; display: flex;
...@@ -373,6 +377,7 @@ onBeforeUnmount(() => { ...@@ -373,6 +377,7 @@ onBeforeUnmount(() => {
color: #b1b5c4; color: #b1b5c4;
font-weight: 300; font-weight: 300;
font-size: @font-size-12; font-size: @font-size-12;
text-align: start;
} }
.value { .value {
display: flex; display: flex;
...@@ -421,5 +426,11 @@ onBeforeUnmount(() => { ...@@ -421,5 +426,11 @@ onBeforeUnmount(() => {
} }
} }
} }
.help {
width: 0;
height: 100%;
display: inline-block;
vertical-align: middle;
}
} }
</style> </style>
src/pages/ImgConversion/components/img_darg.vue
<template> <template>
<div <div class="drag-box">
:class="[DefaultClassName, 'drag']" <div
:style="{ :class="[DefaultClassName, 'drag']"
backgroundImage: `url(${img})`, :style="{
}" backgroundImage: `url(${img})`,
></div> }"
></div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
...@@ -46,8 +48,8 @@ class Drag { ...@@ -46,8 +48,8 @@ class Drag {
} }
// 获取父元素的宽高 // 获取父元素的宽高
getBoundary() { getBoundary() {
this.maxWidth = this.target.parentNode.clientWidth; this.maxWidth = this.target.parentNode.parentNode.clientWidth;
this.maxHeight = this.target.parentNode.clientHeight; this.maxHeight = this.target.parentNode.parentNode.clientHeight;
} }
// 获取自身起始信息 // 获取自身起始信息
getInfo(e) { getInfo(e) {
...@@ -273,16 +275,25 @@ onMounted(() => { ...@@ -273,16 +275,25 @@ onMounted(() => {
</script> </script>
<style lang="less"> <style lang="less">
.drag-box {
position: absolute;
top: 0;
left: 0;
}
.drag { .drag {
height: 100px; height: 100px;
width: 100px; width: 100px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
-moz-background-size: 100% 100%; -moz-background-size: 100% 100%;
border: 1px dashed transparent;
cursor: all-scroll;
&:hover {
border-color: #ddd;
}
.horn { .horn {
width: 14px; width: 14px;
height: 14px; height: 14px;
/* background-color: red; */
position: absolute; position: absolute;
} }
...@@ -291,7 +302,6 @@ onMounted(() => { ...@@ -291,7 +302,6 @@ onMounted(() => {
height: calc(100% - 14px); height: calc(100% - 14px);
margin: 7px 0px; margin: 7px 0px;
position: absolute; position: absolute;
/* background-color: #000; */
cursor: col-resize; cursor: col-resize;
} }
.horizontal { .horizontal {
...@@ -299,7 +309,6 @@ onMounted(() => { ...@@ -299,7 +309,6 @@ onMounted(() => {
height: 10px; height: 10px;
margin: 0px 7px; margin: 0px 7px;
position: absolute; position: absolute;
/* background-color: #000; */
cursor: row-resize; cursor: row-resize;
} }
.top { .top {
......
src/utils/test/index.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS垂直居中</title>
<style>
.wrapper {
width: 500px;
height: 500px;
background-color: pink;
text-align: center;
}
.box {
width: 100px;
height: 100px;
background-color: deepskyblue;
display: inline-block;
vertical-align: middle;
margin: 0 auto;
}
.help {
width: 0;
height: 100%;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box"></div>
<div class="help"></div>
</div>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment