|
|
@@ -1,37 +1,13 @@
|
|
|
<template>
|
|
|
- <main>
|
|
|
- <header>
|
|
|
- <p>试一试这样问我：</p>
|
|
|
- <a-button size="small" type="outline" shape="round" @click="changeCards"
|
|
|
- ><template #icon> <icon-swap /> </template>换一换</a-button
|
|
|
- >
|
|
|
- </header>
|
|
|
- <section>
|
|
|
- <div
|
|
|
- v-for="(item, key) in data"
|
|
|
- :key="key"
|
|
|
- :class="{ rotate: isRotate, 'no-rotate': isOver }"
|
|
|
- @click="selectCard(item.sug)"
|
|
|
- >
|
|
|
- <div>
|
|
|
- <img :src="item.img" />
|
|
|
- <p>{{ item.title }}</p>
|
|
|
- </div>
|
|
|
- <p>{{ item.content }}</p>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
- </main>
|
|
|
+ <normal-cards :data="data" />
|
|
|
</template>
|
|
|
<script>
|
|
|
-import { defineComponent, inject, onMounted, ref } from "vue";
|
|
|
+import NormalCards from "@/components/NormalCards.vue";
|
|
|
+import { defineComponent, ref } from "vue";
|
|
|
export default defineComponent({
|
|
|
- components: {},
|
|
|
- setup(props) {
|
|
|
- const { helper } = inject("$global");
|
|
|
- const isTest = ref(true);
|
|
|
- const isRotate = ref(false);
|
|
|
- const isOver = ref(false);
|
|
|
- const DEFAULT_DATA = [
|
|
|
+ components: { NormalCards },
|
|
|
+ setup() {
|
|
|
+ const data = ref([
|
|
|
{
|
|
|
img: "https://szwl.harix.iamidata.com/static/img/%E7%94%9F%E6%B4%BB%E5%8A%A9%E6%89%8B7.20a5f1df.svg",
|
|
|
title: "私人营养师",
|
|
|
@@ -68,95 +44,8 @@ export default defineComponent({
|
|
|
content: "最会敲回车的现代诗人～",
|
|
|
sug: "我要你扮演一个诗人。你将创作唤起情感并具有激起人们灵魂的力量的诗歌，写任何主题，但要确保你的文字以美丽而有意义的方式传达你试图表达的感觉。你也可以想出一些简短的诗句，这些诗句仍然足够强大，可以在读者的脑海中留下印记。等待我输入主题后再开始生成。我需要你创作的主题是：（秋天的落叶）"
|
|
|
}
|
|
|
- ];
|
|
|
- const selectCard = (data) => {
|
|
|
- helper.$bus.emit("set-input", data);
|
|
|
- };
|
|
|
- const data = ref(DEFAULT_DATA);
|
|
|
- const changeCards = () => {
|
|
|
- isRotate.value = true;
|
|
|
- setTimeout(() => {
|
|
|
- data.value = helper.shuffleArray(DEFAULT_DATA);
|
|
|
- isTest.value = !isTest.value;
|
|
|
- isOver.value = true;
|
|
|
- isRotate.value = false;
|
|
|
- }, 500);
|
|
|
- setTimeout(() => {
|
|
|
- isOver.value = false;
|
|
|
- }, 550);
|
|
|
- };
|
|
|
- return { data, changeCards, isRotate, isOver, selectCard };
|
|
|
+ ]);
|
|
|
+ return { data };
|
|
|
}
|
|
|
});
|
|
|
</script>
|
|
|
-<style lang="scss" scoped>
|
|
|
-main {
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- overflow: hidden;
|
|
|
- > header {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 18px;
|
|
|
- > p {
|
|
|
- color: #7f7f7f;
|
|
|
- }
|
|
|
- }
|
|
|
- > section {
|
|
|
- overflow-y: auto;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- gap: 12px;
|
|
|
- > div {
|
|
|
- width: calc(33.33333% - 13.33333px);
|
|
|
- height: 128px;
|
|
|
- background: #f6fbfd;
|
|
|
- border-radius: 12px;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.5s linear;
|
|
|
- &.no-rotate {
|
|
|
- transform-style: flat;
|
|
|
- transition-duration: 0.5s;
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
- &.rotate {
|
|
|
- transform-style: preserve-3d;
|
|
|
- transform: rotateY(180deg);
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
- &:hover {
|
|
|
- background: #e9f7f8;
|
|
|
- }
|
|
|
- > div {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin: 24px 20px 12px;
|
|
|
- > img {
|
|
|
- width: 28px;
|
|
|
- height: 28px;
|
|
|
- margin-right: 12px;
|
|
|
- }
|
|
|
- > p {
|
|
|
- font-size: 18px;
|
|
|
- font-weight: 600;
|
|
|
- color: #000;
|
|
|
- }
|
|
|
- }
|
|
|
- > p {
|
|
|
- font-size: 15px;
|
|
|
- font-family: MiSans;
|
|
|
- font-weight: 400;
|
|
|
- color: #7a7d7e;
|
|
|
- margin: 0 20px;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- line-height: 1.4;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
zhangnuoyan