输入区样式调整完毕
This commit is contained in:
parent
7b056d476d
commit
7181da5b7b
@ -74,11 +74,12 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import { ARTICLE_MAX_COUNT } from '../constants/constants'
|
||||
import HeaderComponent from './HeaderComponent.vue'
|
||||
import SelectModel from './SelectModelComponent.vue'
|
||||
|
||||
// 使用解构直接获取 isGenerating
|
||||
const { isGenerating } = defineProps({
|
||||
isGenerating: {
|
||||
type: Boolean,
|
||||
@ -86,7 +87,7 @@ const { isGenerating } = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['rewrite'])
|
||||
const emit = defineEmits(['rewrite', 'update:model'])
|
||||
|
||||
const mode = ref('single')
|
||||
const originalText = ref('')
|
||||
@ -102,6 +103,10 @@ onMounted(async () => {
|
||||
}
|
||||
})
|
||||
|
||||
watch(currentModel, (newValue) => {
|
||||
emit('update:model', newValue)
|
||||
})
|
||||
|
||||
const validateInput = () => {
|
||||
if (generationCount.value < 1) {
|
||||
setGenerationCount(1)
|
||||
@ -166,7 +171,20 @@ const handleRewrite = () => {
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
/* 其他样式从 TextRewritingTool.vue 复制相关的部分 */
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 16px 0;
|
||||
color: #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.section-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.rewrite-mode-section {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
@ -177,7 +195,187 @@ const handleRewrite = () => {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* ... 复制其他相关样式 ... */
|
||||
.mode-tab {
|
||||
background-color: white;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 10px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
flex: 1;
|
||||
font-size: 16px;
|
||||
padding: 14px;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.mode-tab:hover {
|
||||
border-color: #2ecc71;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.mode-tab.active {
|
||||
background: linear-gradient(135deg, #2ecc71, #27ae60);
|
||||
border-color: transparent;
|
||||
color: white;
|
||||
box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
|
||||
}
|
||||
|
||||
.mode-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.generation-count {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 10px;
|
||||
border-left: 4px solid #2ecc71;
|
||||
}
|
||||
|
||||
.count-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.count-button {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: 1px solid #e0e0e0;
|
||||
background-color: white;
|
||||
color: #333;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.count-button:first-child {
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
|
||||
.count-button:last-child {
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
|
||||
.count-button:hover:not(:disabled) {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.count-button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.count-input {
|
||||
border: 1px solid #e0e0e0;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
padding: 8px 0;
|
||||
width: 50px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.original-text-section {
|
||||
margin-bottom: 24px;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.char-count {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-weight: normal;
|
||||
margin-left: auto;
|
||||
background-color: #f0f0f0;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.text-input {
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 10px;
|
||||
font-family: inherit;
|
||||
font-size: 16px;
|
||||
padding: 16px;
|
||||
resize: none;
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
min-height: 150px;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
transition: border-color 0.3s, box-shadow 0.3s;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.text-input:focus {
|
||||
outline: none;
|
||||
border-color: #2ecc71;
|
||||
box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.2);
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.rewrite-button {
|
||||
background: linear-gradient(135deg, #2ecc71, #27ae60);
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-top: 16px;
|
||||
padding: 16px;
|
||||
transition: all 0.3s ease;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
|
||||
}
|
||||
|
||||
.rewrite-button:hover:not(:disabled) {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(46, 204, 113, 0.4);
|
||||
}
|
||||
|
||||
.rewrite-button:active:not(:disabled) {
|
||||
transform: translateY(1px);
|
||||
box-shadow: 0 2px 8px rgba(46, 204, 113, 0.3);
|
||||
}
|
||||
|
||||
.rewrite-button:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 50%;
|
||||
border-top-color: white;
|
||||
animation: spin 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.input-section {
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
<DisclaimerComponent />
|
||||
<InputSection
|
||||
:is-generating="isGenerating"
|
||||
v-model:model="currentModel"
|
||||
@rewrite="handleRewrite"
|
||||
/>
|
||||
<!-- 右侧结果区域 -->
|
||||
@ -87,22 +88,34 @@
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
</div>
|
||||
<FooterComponent />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ref, reactive, onMounted, defineComponent } from 'vue'
|
||||
import DisclaimerComponent from '../components/DisclaimerComponent.vue'
|
||||
import InputSection from '../components/InputSection.vue'
|
||||
import FooterComponent from '../components/FooterComponent.vue'
|
||||
|
||||
// 使用 defineComponent 包装组件
|
||||
defineComponent({
|
||||
name: 'TextRewritingTool',
|
||||
components: {
|
||||
DisclaimerComponent,
|
||||
InputSection,
|
||||
FooterComponent
|
||||
}
|
||||
})
|
||||
|
||||
const rewrittenText = ref([])
|
||||
const expandedResults = reactive({})
|
||||
const isGenerating = ref(false)
|
||||
const copiedIndex = ref(null)
|
||||
const layoutMode = ref('list')
|
||||
const currentModel = ref('gpt-4o')
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
@ -206,14 +219,12 @@ const toggleLayout = (newLayout) => {
|
||||
<style scoped>
|
||||
/* 基础布局 */
|
||||
.text-rewriter-container {
|
||||
font-family:
|
||||
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
padding: 20px;
|
||||
min-height: 100vh;
|
||||
/* background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); */
|
||||
background: linear-gradient(135deg, #f0f4fd 0%, #d4e0f7 100%);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@ -223,82 +234,15 @@ const toggleLayout = (newLayout) => {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 背景装饰 */
|
||||
.background-decoration {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bg-circle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
opacity: 0.5;
|
||||
filter: blur(60px);
|
||||
}
|
||||
|
||||
.bg-circle-1 {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background: linear-gradient(45deg, rgba(46, 204, 113, 0.3), rgba(52, 152, 219, 0.3));
|
||||
top: -100px;
|
||||
left: -100px;
|
||||
animation: float 15s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.bg-circle-2 {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
background: linear-gradient(45deg, rgba(155, 89, 182, 0.2), rgba(41, 128, 185, 0.2));
|
||||
bottom: -200px;
|
||||
right: -200px;
|
||||
animation: float 20s ease-in-out infinite alternate-reverse;
|
||||
}
|
||||
|
||||
.bg-circle-3 {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(45deg, rgba(241, 196, 15, 0.2), rgba(231, 76, 60, 0.2));
|
||||
top: 40%;
|
||||
left: 60%;
|
||||
animation: float 18s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.bg-dots {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image: radial-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px);
|
||||
background-size: 30px 30px;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
100% {
|
||||
transform: translate(50px, 50px);
|
||||
}
|
||||
}
|
||||
|
||||
.text-rewriter-layout {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
width: 100%;
|
||||
max-width: 1800px;
|
||||
height: calc(100vh - 80px); /* Reduced height to make room for footer */
|
||||
height: calc(100vh - 80px);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: 10px; /* Add margin to avoid content being hidden by footer */
|
||||
/* padding-bottom: 10px; */
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* 右侧结果区域 */
|
||||
@ -345,7 +289,12 @@ const toggleLayout = (newLayout) => {
|
||||
color: #2e7d32;
|
||||
}
|
||||
|
||||
/* 新增：布局切换按钮样式 */
|
||||
.count-badge {
|
||||
background-color: #e3f2fd;
|
||||
color: #1565c0;
|
||||
}
|
||||
|
||||
/* 布局切换按钮样式 */
|
||||
.layout-toggle {
|
||||
display: flex;
|
||||
border-radius: 8px;
|
||||
@ -369,197 +318,6 @@ const toggleLayout = (newLayout) => {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.count-badge {
|
||||
background-color: #e3f2fd;
|
||||
color: #1565c0;
|
||||
}
|
||||
|
||||
/* 标题样式 */
|
||||
.title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 4px 0;
|
||||
background: linear-gradient(90deg, #2ecc71, #27ae60);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #666;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 16px 0;
|
||||
color: #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.section-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* 字数统计 */
|
||||
.char-count {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-weight: normal;
|
||||
margin-left: auto;
|
||||
background-color: #f0f0f0;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
/* 生成数量控制样式 */
|
||||
.generation-count {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 10px;
|
||||
border-left: 4px solid #2ecc71;
|
||||
}
|
||||
|
||||
.count-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.count-button {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: 1px solid #e0e0e0;
|
||||
background-color: white;
|
||||
color: #333;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.count-button:first-child {
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
|
||||
.count-button:last-child {
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
|
||||
.count-button:hover:not(:disabled) {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.count-button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.count-input {
|
||||
border: 1px solid #e0e0e0;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
padding: 8px 0;
|
||||
width: 50px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
/* 输入区域样式 */
|
||||
.original-text-section {
|
||||
margin-bottom: 24px;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.text-input {
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 10px;
|
||||
font-family: inherit;
|
||||
font-size: 16px;
|
||||
padding: 16px;
|
||||
resize: none;
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
min-height: 150px;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
transition:
|
||||
border-color 0.3s,
|
||||
box-shadow 0.3s;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.text-input:focus {
|
||||
outline: none;
|
||||
border-color: #2ecc71;
|
||||
box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.2);
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
.rewrite-button {
|
||||
background: linear-gradient(135deg, #2ecc71, #27ae60);
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-top: 16px;
|
||||
padding: 16px;
|
||||
transition: all 0.3s ease;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
|
||||
}
|
||||
|
||||
.rewrite-button:hover:not(:disabled) {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(46, 204, 113, 0.4);
|
||||
}
|
||||
|
||||
.rewrite-button:active:not(:disabled) {
|
||||
transform: translateY(1px);
|
||||
box-shadow: 0 2px 8px rgba(46, 204, 113, 0.3);
|
||||
}
|
||||
|
||||
.rewrite-button:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* 加载动画 */
|
||||
.loading-spinner {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 50%;
|
||||
border-top-color: white;
|
||||
animation: spin 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* 结果区域样式 */
|
||||
.results-container {
|
||||
flex: 1;
|
||||
@ -574,7 +332,6 @@ const toggleLayout = (newLayout) => {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
/* 新增：网格布局样式 */
|
||||
.results-list.grid-layout {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
@ -596,7 +353,6 @@ const toggleLayout = (newLayout) => {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 新增：网格布局中的项目样式 */
|
||||
.result-block.grid-item {
|
||||
height: 250px;
|
||||
transition: height 0.5s ease;
|
||||
@ -745,17 +501,6 @@ const toggleLayout = (newLayout) => {
|
||||
animation-delay: -0.16s;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%,
|
||||
80%,
|
||||
100% {
|
||||
transform: scale(0);
|
||||
}
|
||||
40% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-result-section {
|
||||
display: flex;
|
||||
@ -794,26 +539,20 @@ const toggleLayout = (newLayout) => {
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInOut {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
20% {
|
||||
opacity: 1;
|
||||
}
|
||||
80% {
|
||||
opacity: 1;
|
||||
}
|
||||
@keyframes bounce {
|
||||
0%,
|
||||
80%,
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
40% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition:
|
||||
opacity 0.3s,
|
||||
transform 0.3s;
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
@ -822,22 +561,7 @@ const toggleLayout = (newLayout) => {
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
.list-enter-active,
|
||||
.list-leave-active {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.list-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
.list-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
|
||||
/* 提示框样式 */
|
||||
/* Toast 样式 */
|
||||
:global(.toast-message) {
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
@ -856,25 +580,6 @@ const toggleLayout = (newLayout) => {
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
|
||||
/* 布局切换按钮 */
|
||||
.layout-toggle-button {
|
||||
background-color: #f0f0f0;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.layout-toggle-button:hover {
|
||||
background-color: #e0e0e0;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 1200px) {
|
||||
.text-rewriter-layout {
|
||||
@ -886,7 +591,6 @@ const toggleLayout = (newLayout) => {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 网格布局在小屏幕上调整 */
|
||||
.results-list.grid-layout {
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
}
|
||||
@ -906,16 +610,6 @@ const toggleLayout = (newLayout) => {
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.mode-tabs {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.generation-count {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
@ -939,7 +633,6 @@ const toggleLayout = (newLayout) => {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* 在手机上强制使用列表布局 */
|
||||
.results-list.grid-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -949,50 +642,4 @@ const toggleLayout = (newLayout) => {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* 模式选择样式 */
|
||||
.rewrite-mode-section {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.mode-tabs {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.mode-tab {
|
||||
background-color: white;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 10px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
flex: 1;
|
||||
font-size: 16px;
|
||||
padding: 14px;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.mode-tab:hover {
|
||||
border-color: #2ecc71;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.mode-tab.active {
|
||||
background: linear-gradient(135deg, #2ecc71, #27ae60);
|
||||
border-color: transparent;
|
||||
color: white;
|
||||
box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
|
||||
}
|
||||
|
||||
.mode-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user