page mobile compatible
This commit is contained in:
parent
7e8c07bf2c
commit
a7e3080608
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
/* 内容区容器 */
|
/* 内容区容器 */
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
/* 页面的标题 */
|
/* 页面的标题 */
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue