Skip to content

O
on-chain-pc
Commit db3fcdf4 by lei
Options

1

parent dd213f2c
Showing with 151 additions and 185 deletions
package.json
...@@ -11,7 +11,6 @@ ...@@ -11,7 +11,6 @@
"amfe-flexible": "^2.2.1", "amfe-flexible": "^2.2.1",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"echarts": "^5.3.2", "echarts": "^5.3.2",
"postcss-px2rem": "^0.3.0",
"tdesign-icons-vue-next": "^0.1.1", "tdesign-icons-vue-next": "^0.1.1",
"tdesign-vue-next": "^0.15.1", "tdesign-vue-next": "^0.15.1",
"vue": "^3.0.0", "vue": "^3.0.0",
......
src/components/Header/headerNav.vue
...@@ -60,9 +60,6 @@ const changeHandler = (active) => { ...@@ -60,9 +60,6 @@ const changeHandler = (active) => {
.Header-box { .Header-box {
width: 100%; width: 100%;
border-bottom: @box-border; border-bottom: @box-border;
:deep(.t-head-menu__inner) {
height: 0.3rem;
}
.log-box { .log-box {
width: 100%; width: 100%;
.logo { .logo {
......
src/components/MenuList/lastMenuOption.vue
...@@ -20,8 +20,8 @@ ...@@ -20,8 +20,8 @@
v-for="(item, index) in twitterOptions" v-for="(item, index) in twitterOptions"
:key="index" :key="index"
:value="item.label" :value="item.label"
:class="{ active: monitoring(item.label, 1) }" :class="{ active: monitoring1(item.label) }"
@click="choose(item.label, 1)" @click="choose1(item.label)"
> >
{{ item.label }} {{ item.label }}
</t-radio-button> </t-radio-button>
...@@ -41,8 +41,8 @@ ...@@ -41,8 +41,8 @@
v-for="(item, index) in AccountDate" v-for="(item, index) in AccountDate"
:key="index" :key="index"
:value="item.label" :value="item.label"
:class="{ active: monitoring(item.label, 2) }" :class="{ active: monitoring2(item.label) }"
@click="choose(item.label, 2)" @click="choose2(item.label)"
> >
{{ item.label }} {{ item.label }}
</t-radio-button> </t-radio-button>
...@@ -62,8 +62,8 @@ ...@@ -62,8 +62,8 @@
v-for="(item, index) in DiscordMember" v-for="(item, index) in DiscordMember"
:key="index" :key="index"
:value="item.label" :value="item.label"
:class="{ active: monitoring(item.label, 3) }" :class="{ active: monitoring3(item.label) }"
@click="choose(item.label, 3)" @click="choose3(item.label)"
> >
{{ item.label }} {{ item.label }}
</t-radio-button> </t-radio-button>
...@@ -83,8 +83,8 @@ ...@@ -83,8 +83,8 @@
v-for="(item, index) in DiscordOnline" v-for="(item, index) in DiscordOnline"
:key="index" :key="index"
:value="item.label" :value="item.label"
:class="{ active: monitoring(item.label, 4) }" :class="{ active: monitoring4(item.label) }"
@click="choose(item.label, 4)" @click="choose4(item.label)"
> >
{{ item.label }} {{ item.label }}
</t-radio-button> </t-radio-button>
...@@ -104,8 +104,8 @@ ...@@ -104,8 +104,8 @@
v-for="(item, index) in timeInterval" v-for="(item, index) in timeInterval"
:key="index" :key="index"
:value="item.label" :value="item.label"
:class="{ active: monitoring(item.label, 5) }" :class="{ active: monitoring5(item.label) }"
@click="choose(item.label, 5)" @click="choose5(item.label)"
> >
{{ item.label }} {{ item.label }}
</t-radio-button> </t-radio-button>
...@@ -125,8 +125,8 @@ ...@@ -125,8 +125,8 @@
v-for="(item, index) in TwitterGrowth" v-for="(item, index) in TwitterGrowth"
:key="index" :key="index"
:value="item.label" :value="item.label"
:class="{ active: monitoring(item.label, 6) }" :class="{ active: monitoring6(item.label) }"
@click="choose(item.label, 6)" @click="choose6(item.label)"
> >
{{ item.label }} {{ item.label }}
</t-radio-button> </t-radio-button>
...@@ -146,8 +146,8 @@ ...@@ -146,8 +146,8 @@
v-for="(item, index) in DiscordGrowth" v-for="(item, index) in DiscordGrowth"
:key="index" :key="index"
:value="item.label" :value="item.label"
:class="{ active: monitoring(item.label, 7) }" :class="{ active: monitoring7(item.label) }"
@click="choose(item.label, 7)" @click="choose7(item.label)"
> >
{{ item.label }} {{ item.label }}
</t-radio-button> </t-radio-button>
...@@ -168,8 +168,8 @@ ...@@ -168,8 +168,8 @@
v-for="(item, index) in TelegramMember" v-for="(item, index) in TelegramMember"
:key="index" :key="index"
:value="item.label" :value="item.label"
:class="{ active: monitoring(item.label, 8) }" :class="{ active: monitoring8(item.label) }"
@click="choose(item.label, 8)" @click="choose8(item.label)"
> >
{{ item.label }} {{ item.label }}
</t-radio-button> </t-radio-button>
...@@ -195,21 +195,85 @@ import { ...@@ -195,21 +195,85 @@ import {
TelegramMember, TelegramMember,
} from "../../utils/local/tokensession/tokeninfo.ts"; } from "../../utils/local/tokensession/tokeninfo.ts";
// 监听用户点击 // 监听用户点击
const monitoring = computed((value, title) => { const monitoring1 = computed((value) => {
return function (value, title) { return function (value) {
return formData.currentBtn === title + "-" + value; return formData.TW === value;
};
});
const monitoring2 = computed((value) => {
return function (value) {
return formData.ACD === value;
};
});
const monitoring3 = computed((value) => {
return function (value) {
return formData.DM === value;
};
});
const monitoring4 = computed((value) => {
return function (value) {
return formData.DOR === value;
};
});
const monitoring5 = computed((value) => {
return function (value) {
return formData.TR === value;
};
});
const monitoring6 = computed((value) => {
return function (value) {
return formData.TUG === value;
};
});
const monitoring7 = computed((value) => {
return function (value) {
return formData.DUG === value;
};
});
const monitoring8 = computed((value) => {
return function (value) {
return formData.TM === value;
}; };
}); });
const choose = (value, title) => { const choose1 = (value) => {
formData.currentBtn = title + "-" + value; formData.TW = value;
console.log(formData.currentBtn); };
const choose2 = (value) => {
formData.ACD = value;
};
const choose3 = (value) => {
formData.DM = value;
};
const choose4 = (value) => {
formData.DOR = value;
};
const choose5 = (value) => {
formData.TR = value;
};
const choose6 = (value) => {
formData.TUG = value;
};
const choose7 = (value) => {
formData.DUG = value;
};
const choose8 = (value) => {
formData.TM = value;
}; };
// 默认选择的字段 // 默认选择的字段
const formData = reactive({ const formData = reactive({
currentBtn: "1-1-500", TW: "1-500",
ACD:'1Day',
DM:'500',
DOR:'1-5%',
TR:'6H',
TUG:'0-50',
DUG:'0-50',
TM:'1-500'
}); });
// label 的宽度 // label 的宽度
const labelValue = ref(180); const labelValue = ref(180);
...@@ -219,8 +283,7 @@ const labelValue = ref(180); ...@@ -219,8 +283,7 @@ const labelValue = ref(180);
<style scoped lang="less"> <style scoped lang="less">
@import "../../utils/global/css/font.less"; @import "../../utils/global/css/font.less";
.menu-line-one { .menu-line-one {
width: 100%; height: 50px;
height: 0.3rem;
border-bottom: @box-border; border-bottom: @box-border;
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -230,12 +293,11 @@ const labelValue = ref(180); ...@@ -230,12 +293,11 @@ const labelValue = ref(180);
font-weight: bold; font-weight: bold;
color: @smallLabelColor; color: @smallLabelColor;
font-size: @text2; font-size: @text2;
padding-left: 0.2rem; padding-left: 20px;
} }
} }
.list-box { .list-box {
width: 100%; width: 100%;
height: 1.37rem;
border-right: @box-border; border-right: @box-border;
display: flex; display: flex;
.last-line-menu { .last-line-menu {
...@@ -248,7 +310,6 @@ const labelValue = ref(180); ...@@ -248,7 +310,6 @@ const labelValue = ref(180);
.custom-group { .custom-group {
width: 100%; width: 100%;
.t-radio-button { .t-radio-button {
width: 17%;
border: none; border: none;
color: black; color: black;
font-size: @text5; font-size: @text5;
......
src/components/MenuList/menuBox.vue
...@@ -49,7 +49,7 @@ const labelValue = ref(180); ...@@ -49,7 +49,7 @@ const labelValue = ref(180);
overflow: auto; overflow: auto;
.segmentation { .segmentation {
width: 100%; width: 100%;
height: 0.16rem; height: 26px;
border-bottom: @box-border; border-bottom: @box-border;
display: flex; display: flex;
justify-content: center; justify-content: center;
......
src/components/detailLogo.vue
...@@ -19,17 +19,16 @@ ...@@ -19,17 +19,16 @@
<style scoped lang="less"> <style scoped lang="less">
@import '../utils/global/css/font.less'; @import '../utils/global/css/font.less';
.project-img { .project-img {
margin-top: 0.02rem; margin-top: 6px;
width: 100%; width: 100%;
height: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.img-box { .img-box {
border: @listSearchBorder; border: @listSearchBorder;
border-radius: 50%; border-radius: 50%;
width: 0.4rem; width: 80px;
height: 0.4rem; height: 80px;
.logo-item { .logo-item {
width: 100%; width: 100%;
height: 50%; height: 50%;
...@@ -38,7 +37,7 @@ ...@@ -38,7 +37,7 @@
display: block; display: block;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 20%; left: 20px;
color: @SearchColor; color: @SearchColor;
font-size: @text3; font-size: @text3;
} }
...@@ -50,7 +49,7 @@ ...@@ -50,7 +49,7 @@
border-radius: 16px; border-radius: 16px;
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-top: 0.04rem; margin-top: 8px;
span { span {
display: block; display: block;
color: white; color: white;
......
src/components/detailsContent/nftDetails.vue
...@@ -121,45 +121,11 @@ ...@@ -121,45 +121,11 @@
</div> </div>
</div> </div>
</div> </div>
<!-- -->
<!-- 前往数据分析页 --> <!-- 前往数据分析页 -->
<div class="gotoAnalysis"> <div class="gotoAnalysis">
<t-button @click="gotoAnalysis">社媒数据分析</t-button> <t-button @click="gotoAnalysis">社媒数据分析</t-button>
</div> </div>
<div class="middle-content"> <div class="twitter-box"></div>
<div class="middle-line">
<span>Elvantis</span>
<span>@ElvantisGame</span>
</div>
<div class="middle-line">
<span>Elvantis</span>
<span>@ElvantisGame</span>
</div>
</div>
<!-- 详情部分 -->
<div
class="details-content-class"
v-for="(item, index) in 20"
:key="index"
>
<div class="detail-line">
<div class="detail-line-child">
<span
>ElvantisElvantisElvantisE lvantis ElvantisElvantisElvantisEl
va ntis
</span>
</div>
</div>
<div class="detail-line2">
<div class="detail-line-child">
<span>4:21PM·6,2022</span>
<span>Reply:864</span>
<span>Retweet:1429</span>
<span>likes:11.9k</span>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -264,78 +230,71 @@ const allfield = reactive([ ...@@ -264,78 +230,71 @@ const allfield = reactive([
z-index: 900; z-index: 900;
.details-box-child { .details-box-child {
width: 96%; width: 96%;
height: 100%; margin-top: 6px;
margin-top: 2%;
.detail-header { .detail-header {
height: 100%;
border-radius: 6px; border-radius: 6px;
border-left: @box-border; border-left: @box-border;
border-right: @box-border; border-right: @box-border;
.header-button { .header-button {
width: 100%; width: 100%;
height: 4%; height: 30px;
background: @SearchColor; background: @SearchColor;
border: none; border: none;
} }
.project-content1 { .project-content1 {
width: 100%; width: 100%;
height: 10%; height: 90px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.project-content1-child { .project-content1-child {
width: 98%; width: 98%;
height: 100%;
display: flex; display: flex;
.content-left { .content-left {
width: 70%; width: 70%;
height: 100%;
.projectName { .projectName {
width: 100%; width: 100%;
height: 60%;
font-size: @text1; font-size: @text1;
white-space: nowrap; white-space: nowrap;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding-left: 0.08rem; padding-left: 12px;
span { span {
display: block; display: block;
} }
} }
.project-label { .project-label {
width: 100%; width: 100%;
height: 30%; height: 30px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.label-text { .label-text {
display: block; display: block;
padding: 0.08rem; padding: 12px;
font-size: @text4; font-size: @text4;
white-space: nowrap; white-space: nowrap;
} }
.labelone { .labelone {
width: 26%; width: 26%;
height: 70%;
background: @labelBackgroundOne; background: @labelBackgroundOne;
border-radius: 0.5rem; border-radius: 6px;
color: white; color: white;
font-size: @text5; font-size: @text5;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-right: 0.02rem; margin-right: 6px;
span { span {
display: block; display: block;
} }
} }
.labeltwo { .labeltwo {
width: 26%; width: 26%;
height: 70%;
background: @labelBackgroundTwo; background: @labelBackgroundTwo;
color: white; color: white;
border-radius: 0.5rem; border-radius: 6px;
font-size: @text5; font-size: @text5;
display: flex; display: flex;
justify-content: center; justify-content: center;
...@@ -349,116 +308,70 @@ const allfield = reactive([ ...@@ -349,116 +308,70 @@ const allfield = reactive([
} }
} }
.allfield-details { .allfield-details {
overflow: auto; // overflow: auto;
.allfielder { .allfielder {
border-bottom: @box-border; border-bottom: @box-border;
margin-top: 6px;
.content-allfield { .content-allfield {
width: 100%;
display: flex; display: flex;
padding: 0.04rem 0 0.04rem 0.1rem; justify-content: space-between;
padding: 1px 2px 6px 16px;
.title { .title {
width: 46%;
font-size: @text5; font-size: @text5;
color: @smallLabelColor; color: @smallLabelColor;
} }
.titleText { .titleText {
width: 70%; margin-right: 30px;
font-size: @text5; font-size: @text5;
} }
} }
} }
.gotoAnalysis { .gotoAnalysis {
width: 100%; width: 100%;
height: 0.4rem; height: 70px;
border-top: @box-border; border-top: @box-border;
border-bottom: @box-border; border-bottom: @box-border;
margin-top: 0.03rem; margin-top: 6px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.t-button { .t-button {
width: 70%; width: 80%;
background: @SearchColor; background: @SearchColor;
height: 40px;
border: none; border: none;
border-radius: 0.02rem; border-radius: 6px;
}
}
.middle-content {
width: 100%;
border-bottom: @box-border;
border-right: @box-border;
.middle-line {
width: 100%;
height: 0.2rem;
display: flex;
justify-content: space-between;
color: @smallLabelColor;
font-size: @text4;
align-items: center;
span {
display: block;
padding: 0 0.16rem;
}
} }
} }
.details-content-class { .twitter-box {
width: 100%; width:100%;
border-bottom: @box-border; height: 348px;
border-right: @box-border; background: pink;
.detail-line {
width: 100%;
height: 0.2rem;
display: flex;
justify-content: center;
align-items: center;
.detail-line-child {
width: 93%;
height: 80%;
font-size: @text5;
}
}
.detail-line2 {
width: 100%;
height: 0.1rem;
display: flex;
justify-content: center;
.detail-line-child {
width: 92%;
height: 100%;
font-size: @text5;
display: flex;
justify-content: space-between;
align-items: center;
color: @detailscontentLineTwo;
span {
display: block;
}
}
}
} }
} }
.content-time { .content-time {
line-height: 8px;
width: 100%; width: 100%;
height: 6%; margin-top: -10px;
.content-timetext { .content-timetext {
font-size: @text5; font-size: @text5;
margin-left: 0.1rem; margin-left: 20px;
:nth-child(1) { :nth-child(1) {
color: @smallLabelColor; color: @smallLabelColor;
} }
:nth-child(2) { :nth-child(2) {
padding-left: 0.1rem; padding-left: 16px;
} }
} }
.content-address { .content-address {
font-size: @text5; font-size: @text5;
margin-left: 0.1rem; margin-left: 20px;
:nth-child(1) { :nth-child(1) {
color: @smallLabelColor; color: @smallLabelColor;
} }
:nth-child(2) { :nth-child(2) {
color: @SearchColor; color: @SearchColor;
padding-left: 0.1rem; padding-left: 16px;
} }
} }
} }
...@@ -466,11 +379,11 @@ const allfield = reactive([ ...@@ -466,11 +379,11 @@ const allfield = reactive([
width: 100%; width: 100%;
height: 2%; height: 2%;
display: flex; display: flex;
margin-top: 0.07rem; margin-top: 16px;
.title { .title {
width: 34%; width: 34%;
font-size: @text5; font-size: @text5;
padding-left: 0.1rem; // padding-left: 10px;
color: @smallLabelColor; color: @smallLabelColor;
white-space: nowrap; white-space: nowrap;
} }
...@@ -485,19 +398,17 @@ const allfield = reactive([ ...@@ -485,19 +398,17 @@ const allfield = reactive([
.buttons-box { .buttons-box {
display: flex; display: flex;
justify-content: center; justify-content: center;
height: 20%;
.t-button { .t-button {
width: 100%; width: 100%;
color: black; color: black;
height: 0.2rem; height: 36px;
margin: 0.01rem 0; margin-top: 6px;
border: @detailsLinkBorder; border: @detailsLinkBorder;
width: 92%; width: 92%;
.btn-svg-cl { .btn-svg-cl {
width: 0.16rem;
} }
span { span {
padding-left: 0.1rem; padding-left: 12px;
} }
} }
} }
......
src/pages/coinnerbrowse.vue
...@@ -38,10 +38,12 @@ const MonitorHeight = () => { ...@@ -38,10 +38,12 @@ const MonitorHeight = () => {
let clName = document.documentElement.getElementsByClassName("header-nav"); let clName = document.documentElement.getElementsByClassName("header-nav");
menuDetail.value = document.body.clientHeight - clName[0].clientHeight; menuDetail.value = document.body.clientHeight - clName[0].clientHeight;
}; };
window.addEventListener("resize", () => { // window.addEventListener("resize", () => {
// if(document.body.clientWidth <= 768){
// }
// preventShake(MonitorHeight, 300); // preventShake(MonitorHeight, 300);
MonitorHeight(); // });
});
</script> </script>
...@@ -49,20 +51,17 @@ window.addEventListener("resize", () => { ...@@ -49,20 +51,17 @@ window.addEventListener("resize", () => {
@import "../utils/global/css/font.less"; @import "../utils/global/css/font.less";
@import "../utils/global/css/theme.less"; @import "../utils/global/css/theme.less";
.App-box { .App-box {
width: 100vw;
height: 100vh;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow-y: auto;
background: @mainboxbackground; background: @mainboxbackground;
.title-box { .title-box {
width: 100%; height: 1080px;
height: 92%;
display: flex; display: flex;
.menu-box-cl { .menu-box-cl {
width: 80%; width: 80vw;
} }
.detail-box-cl { .detail-box-cl {
width: 20%; width: 370px;
} }
} }
} }
......
vue.config.js
module.exports = { module.exports = {
// 基本路径 // 基本路径
publicPath: './', publicPath: './',
css: { // css: {
loaderOptions: { // loaderOptions: {
css: {}, // css: {},
postcss: { // postcss: {
plugins: [ // plugins: [
require("postcss-px2rem")({ // require("postcss-px2rem")({
remUnit: 192 // remUnit: 192
}) // })
] // ]
} // }
} // }
} // }
// 代理 // 代理
// devServer: { // devServer: {
// port: 8080, // port: 8080,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment