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