page mobile compatible

This commit is contained in:
KUN1007 2023-06-18 00:41:34 +08:00
parent 7e8c07bf2c
commit a7e3080608
7 changed files with 38 additions and 20 deletions

View file

@ -54,15 +54,12 @@ import { calculateTotalAmount } from './log'
height: 100vh; height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-width: 1100px; min-height: 800px;
min-height: 600px;
color: var(--kungalgame-font-color-3); color: var(--kungalgame-font-color-3);
} }
/* 文章部分 */ /* 文章部分 */
.article { .article {
/* 固定宽高 */ min-height: 500px;
width: 1000px;
height: 500px;
/* 居中 */ /* 居中 */
margin: auto; margin: auto;
background-color: var(--kungalgame-trans-white-5); background-color: var(--kungalgame-trans-white-5);
@ -136,4 +133,11 @@ import { calculateTotalAmount } from './log'
background-color: var(--kungalgame-green-4); background-color: var(--kungalgame-green-4);
} }
} }
@media (max-width: 1000px) {
.content {
flex-direction: column;
width: 100%;
}
}
</style> </style>

View file

@ -91,7 +91,6 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
height: 100vh; height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-width: 800px;
min-height: 1100px; min-height: 1100px;
} }
/* 总容器 */ /* 总容器 */
@ -175,4 +174,11 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
.topic > ul li { .topic > ul li {
margin: 5px 0; margin: 5px 0;
} }
@media (max-width: 1000px) {
.container {
width: 100%;
padding: 0;
}
}
</style> </style>

View file

@ -39,7 +39,7 @@ const submit = () => {
</div> </div>
</div> </div>
<!-- 编辑器 --> <!-- 编辑器 -->
<WangEditor class="editor" @html="" /> <WangEditor class="editor" />
</div> </div>
<!-- 内容区的底部 --> <!-- 内容区的底部 -->
@ -64,8 +64,7 @@ const submit = () => {
.root { .root {
height: 100vh; height: 100vh;
min-height: 1100px; min-height: 1200px;
min-width: 900px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -123,4 +122,10 @@ const submit = () => {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
@media (max-width: 1000px) {
.container {
width: 100%;
}
}
</style> </style>

View file

@ -268,4 +268,11 @@ a {
list-style: inside; list-style: inside;
text-indent: 4em; text-indent: 4em;
} }
@media (max-width: 1000px) {
.content-container {
width: 100%;
padding: 0;
}
}
</style> </style>

View file

@ -32,14 +32,13 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
height: 100vh; height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-width: 800px;
min-height: 750px; min-height: 750px;
} }
/* 根容器 */ /* 根容器 */
.container { .container {
/* 固定宽高 */ /* 固定宽高 */
height: 600px; height: 600px;
width: 700px; max-width: 800px;
/* 居中 */ /* 居中 */
margin: auto; margin: auto;
background-color: var(--kungalgame-trans-white-5); background-color: var(--kungalgame-trans-white-5);
@ -69,8 +68,6 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
} }
/* 文章部分 */ /* 文章部分 */
.article { .article {
width: 600px;
flex-shrink: 0;
background-color: var(--kungalgame-trans-white-5); background-color: var(--kungalgame-trans-white-5);
border-left: 1px solid var(--kungalgame-red-4); border-left: 1px solid var(--kungalgame-red-4);
display: flex; display: flex;
@ -80,6 +77,7 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
/* 文章标题 */ /* 文章标题 */
.article-title { .article-title {
margin: 20px 0; margin: 20px 0;
padding: 0 20px;
font-size: 20px; font-size: 20px;
} }
/* 内容区容器 */ /* 内容区容器 */

View file

@ -35,7 +35,7 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
<BackToPrevious /> <BackToPrevious />
</div> </div>
<!-- 版权 --> <!-- 版权 -->
<KUNGalgameFooter style="position: absolute; bottom: -40px" /> <KUNGalgameFooter style="position: absolute; bottom: -60px" />
</div> </div>
</div> </div>
</template> </template>
@ -44,8 +44,6 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
.root { .root {
height: 100vh; height: 100vh;
width: 100vw; width: 100vw;
min-width: 700px;
min-height: 600px;
background: linear-gradient( background: linear-gradient(
var(--kungalgame-trans-pink-1), var(--kungalgame-trans-pink-1),
var(--kungalgame-trans-blue-1) var(--kungalgame-trans-blue-1)
@ -58,8 +56,8 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
/* 内容区容器 */ /* 内容区容器 */
.container { .container {
/* 固定宽高 */ /* 固定宽高 */
width: 600px; max-width: 600px;
height: 500px; max-height: 500px;
/* 居中 */ /* 居中 */
margin: auto; margin: auto;
position: relative; position: relative;
@ -85,7 +83,7 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
} }
/* 单个项目之间的距离 */ /* 单个项目之间的距离 */
.list > li { .list > li {
margin: 7px 0; margin-bottom: 30px;
list-style: inside; list-style: inside;
} }
/* 页面的标题 */ /* 页面的标题 */

View file

@ -93,7 +93,7 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
} }
.container { .container {
/* 固定宽高 */ /* 固定宽高 */
width: 900px; max-width: 900px;
height: 1300px; height: 1300px;
/* 居中 */ /* 居中 */
margin: auto; margin: auto;