hongxilin
/
AIxiaocaishen
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

手机端适配

ds_hxl
宋杰 2 weeks ago
parent
38fd85e184
commit
9fe1a7f3e0
3 changed files with 114 additions and 107 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 200
      src/views/AiEmotion.vue
  2. 2
      src/views/components/emotionDecod.vue
  3. 13
      src/views/components/marketTemperature.vue

200
src/views/AiEmotion.vue
View File

@ -384,8 +384,8 @@ onMounted(() => {
<style scoped>
.class003 {
padding-top: 7rem;
padding-left: 12rem;
padding-top: 8%;
padding-left: 10%;
}
.class003 .div02 {
@ -395,8 +395,8 @@ onMounted(() => {
width: 35%;
min-height: 40px;
float: left;
margin-left: 100px;
margin-top: 30px;
margin-left: 9%;
margin-top: 2%;
text-align: center;
font-size: 24px;
color: white;
@ -409,9 +409,8 @@ onMounted(() => {
width: 35%;
min-height: 40px;
float: left;
margin-left: 100px;
margin-left: 9%;
text-align: center;
margin-top: 10px;
font-size: 24px;
color: white;
}
@ -450,10 +449,9 @@ onMounted(() => {
.bk-image {
background-image: url("@/assets/img/AiEmotion/bk03.png");
background-size: 100% 100%;
/* background-position: center; */
background-repeat: no-repeat;
width: 95%;
height: 30rem;
height: auto;
margin: 0 auto;
margin-top: 20px;
}
@ -461,22 +459,15 @@ onMounted(() => {
/* 最后文字的颜色 */
.text-container {
position: relative;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
/* 设置文字颜色 */
text-align: left;
/* 文字居中对齐 */
padding: 20px;
padding: 3%;
}
.text-container p {
margin: 10px 0;
/* 设置段落间距 */
margin: 0 auto;
font-size: 40px;
/* 设置字体大小 */
margin-left: 50px;
margin-left: 10%;
}
.class07 {
@ -503,6 +494,8 @@ onMounted(() => {
.class0702 {
margin: 0 auto;
width: fit-content;
margin-top: 2%;
margin-bottom: 1%;
}
/* .class0503 {
@ -514,11 +507,6 @@ onMounted(() => {
margin: 0 auto;
}
.class0601 {
padding-top: 5rem;
text-align: center;
padding-bottom: 6rem;
}
.class0603 {
min-width: 100%;
@ -527,8 +515,7 @@ onMounted(() => {
}
.class0502 {
padding-top: 5rem;
text-align: center;
padding-top: 7%;
display: flex;
flex-direction: column;
/* 竖向排列元素 */
@ -538,7 +525,6 @@ onMounted(() => {
.class0601 {
padding-top: 5rem;
text-align: center;
display: flex;
flex-direction: column;
/* 竖向排列元素 */
@ -547,15 +533,15 @@ onMounted(() => {
}
.img03 {
width: 10rem;
height: 10rem;
margin-left: 40rem;
width: 10%;
height: auto;
margin-left: 43%;
}
.img04 {
width: 10rem;
height: 10rem;
margin-left: 40rem;
width: 10%;
height: auto;
margin-left: 43%;
}
.class0701 {
@ -566,26 +552,32 @@ onMounted(() => {
.class0501 {
margin: 0 auto;
width: fit-content;
margin-top: 2%;
margin-bottom: 1%;
}
.class0403 {
margin: 0 auto;
width: fit-content;
margin-top: 2%;
margin-bottom: 1%;
}
.class0301 {
margin: 0 auto;
width: fit-content;
margin-top: 2%;
margin-bottom: 1%;
}
.class0201 {
margin: 0 auto;
width: fit-content;
margin-bottom: 1%;
}
.class0401 {
padding-top: 5rem;
text-align: center;
display: flex;
flex-direction: column;
/* 竖向排列元素 */
@ -594,30 +586,30 @@ onMounted(() => {
}
.img02 {
width: 10rem;
height: 10rem;
margin-left: 40rem;
width: 10%;
height: auto;
margin-left: 43%;
}
.title2 {
color: white;
font-size: 2rem;
font-size: 30px;
font-weight: bold;
margin-left: -4rem;
margin-left: 42%;
}
.title3 {
color: white;
font-size: 2rem;
font-size: 30px;
font-weight: bold;
margin-left: -4rem;
margin-left: 41%;
}
.title4 {
color: white;
font-size: 2rem;
font-weight: bold;
margin-left: -4rem;
margin-left: 41.5%;
}
.class09 {
@ -628,10 +620,10 @@ onMounted(() => {
.scaled-img {
transform: scale(2.5);
text-align: center;
margin-top: 8%;
}
.lz-img {
margin-bottom: 10rem;
text-align: center;
padding-top: 70px;
}
@ -734,31 +726,31 @@ onMounted(() => {
flex-direction: column;
/* 竖向排列元素 */
gap: 1rem;
margin-left: 2rem;
margin-left: 10%;
}
.title1 {
color: white;
font-size: 2.5rem;
font-size: 30px;
font-weight: bold;
margin-left: -1rem;
margin-left: 0%;
}
.img01 {
width: 10rem;
height: 10rem;
width: 10%;
height: auto;
}
.div00 {
display: flex;
flex-direction: column;
/* 竖向排列元素 */
margin-left: 30rem;
margin-left: 37%;
gap: 1rem;
margin-top: -10rem;
width: 70rem;
height: 10rem;
margin-top: -12%;
width: 100%;
height: auto;
}
.span02 {
@ -789,13 +781,12 @@ onMounted(() => {
}
.class01 {
width: 90%;
width: 100%;
/* 固定容器宽度 */
min-height: 100px;
/* 设置最小高度，确保初始显示 */
height: auto;
/* 高度根据内容动态变化 */
padding: 40px;
/* 添加内边距，确保内容与边界有间距 */
box-sizing: border-box;
/* 包括内边距在宽度和高度计算中 */
@ -888,6 +879,37 @@ onMounted(() => {
/* 手机端适配样式 */
@media only screen and (max-width: 768px) {
.title4 {
color: white;
font-size: 20px;
font-weight: bold;
margin-left: 28%;
}
.class0603 {
min-width: 100%;
margin-top: 25%;
}
.scaled-img {
transform: scale(1.5);
text-align: center;
margin-top: 6%;
}
.title3 {
color: white;
font-size: 20px;
font-weight: bold;
margin-left: 30%;
}
.title2 {
color: white;
font-size: 20px;
font-weight: bold;
margin-left: 30%;
}
/* 图片样式 */
.golden-wheel img {
@ -961,8 +983,9 @@ onMounted(() => {
background-image: url('@/assets/img/AiEmotion/bk03.png');
background-size: 100% 100%;
background-repeat: no-repeat;
width: 132%;
margin-left: -45px;
width: 100%;
/* margin-left: -45px; */
height: auto;
}
.class03 .class003 {
@ -975,36 +998,29 @@ onMounted(() => {
height: auto;
box-sizing: border-box;
background-color: #5e81a7;
margin: 0 auto;
margin-bottom: 10rem;
}
.class04 {
width: 126%;
/* min-height: 51rem; */
margin-left: -39px;
width: 100%;
height: auto;
min-height: 38rem;
/* min-height: 51rem; */
/* margin-left: -39px; */
/* min-height: 38rem; */
}
.class02 .container img {
width: 68%;
height: auto;
margin-top: -15px;
margin-left: -2rem;
}
.title2,
.title3,
.title4 {
font-size: 10px;
margin-left: -3rem;
margin-top: 5%;
margin-left: 0%;
}
.img02 {
width: 25%;
height: auto;
margin-left: 6rem;
margin-left: 32%;
}
.class0401 {
@ -1015,20 +1031,21 @@ onMounted(() => {
.img04 {
width: 25%;
height: auto;
margin-left: 6rem;
margin-left: 33%;
}
.text-container p {
font-size: 10px;
font-size: 20px;
}
.lz-img {
margin-bottom: 3rem;
padding-top: 20px;
margin-bottom: 0;
padding-top: 0;
img {
width: 45%;
width: 30%;
height: auto;
margin-top: 5%;
}
}
@ -1045,41 +1062,37 @@ onMounted(() => {
.bk-image {
background-size: 100% 100%;
background-repeat: no-repeat;
width: 126%;
height: 15rem;
width: 100%;
height: auto;
margin: 0 auto;
margin-top: 0px;
margin-left: -40px;
margin-left: 0;
}
.class05 {
background-size: 100% 100%;
background-repeat: no-repeat;
width: 127%;
width: 100%;
height: auto;
min-height: 45rem;
margin-left: -41px;
}
.class06 {
background-size: 100% 100%;
background-repeat: no-repeat;
width: 127%;
width: 100%;
height: auto;
min-height: 32rem;
margin: 0 auto;
margin-left: -41px;
}
.text-container {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
top: 0;
left: 0;
color: white;
text-align: left;
padding: 20px;
padding: 5%;
}
.div00 {
@ -1118,13 +1131,6 @@ onMounted(() => {
color: white;
}
/*
.container {
max-width: 80vw;
width: 100%;
height: auto;
} */
.span01 {
/* 使用导入的背景图片 */
background-size: 100% 100%;
@ -1137,16 +1143,16 @@ onMounted(() => {
/* 添加内边距以显示内容 */
color: #fff;
/* 设置文字颜色以确保可读性 */
font-size: 13px;
font-size: 14px;
/* 增加字体大小以便更清晰显示股票名称 */
text-align: center;
transform: translate(-50%, -50%);
margin-left: -5rem;
margin-left: 33%;
}
.class0502,
.class0601 {
padding-top: 3rem;
padding-top: 10%;
}
}
</style>

2
src/views/components/emotionDecod.vue
View File

@ -181,7 +181,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
data: [0, 1, 2, 3], // 倒序显示
axisLine: { lineStyle: { color: "#8392A5" } },
axisLabel: {
show: true, // 显示刻度标签
show: false, // 显示刻度标签
color: "#fff", // 白色文字
backgroundColor: "transparent",
fontSize: 12,

13
src/views/components/marketTemperature.vue
View File

@ -333,9 +333,9 @@ defineExpose({ initChart })
.container {
margin: 0 auto;
padding: 20px;
/* padding: 20px; */
max-width: 80vw;
padding-bottom: 7rem;
padding-bottom: 10%;
}
.border3 {
@ -352,7 +352,7 @@ defineExpose({ initChart })
border-radius: 8px;
padding: 20px;
width: 80%;
margin-left: 7rem;
margin-left: 8%;
}
/* 手机端适配样式 */
@ -366,8 +366,8 @@ defineExpose({ initChart })
margin-top: 0px;
border-radius: 8px;
padding: 0px;
width: 108%;
margin-left: -8px;
width: 100%;
margin-left: 0%;
height: auto;
}
@ -397,6 +397,7 @@ defineExpose({ initChart })
.WDRL_data {
font-size: 3vw;
}
.el-table .cell {
box-sizing: border-box;
line-height: 23px;
@ -406,6 +407,6 @@ defineExpose({ initChart })
text-overflow: ellipsis;
white-space: normal;
text-align: center;
}
}
}
</style>
Write Preview
Loading…
Cancel
Save