Skip to content

C
Community-Mining-Client
Commit 2602403e authored by xhx's avatar xhx
Browse files
Options

init

parent 4eb938d1
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 228 additions and 90 deletions
babel.config.js
View file @ 2602403e
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
"plugins": [
[
"import",
{
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}
]
]
}
package.json
View file @ 2602403e
......@@ -3,13 +3,16 @@
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"dev": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.21.1",
"babel-plugin-import": "^1.13.3",
"core-js": "^3.6.5",
"register-service-worker": "^1.7.1",
"vant": "^2.12.25",
"vue": "^2.6.11",
"vue-class-component": "^7.2.3",
"vue-property-decorator": "^9.1.2",
......
src/App.vue
View file @ 2602403e
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<div id="app" class="bg-theme-color">
<router-view/>
</div>
</template>
......
src/components/HelloWorld.vue deleted 100644 → 0
View file @ 4eb938d1
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa" target="_blank" rel="noopener">pwa</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class HelloWorld extends Vue {
@Prop() private msg!: string;
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
src/components/MiningCard.vue 0 → 100644
View file @ 2602403e
<template>
<div class="mining-card">
<div class="mining-name">矿池名称</div>
<div>
<div class="mining-tip">
<span>矿池型号</span>
<span>矿池特点</span>
</div>
<div class="mining-eco">
<div>
矿池收益
</div>
<van-button @click="goMining">立即购买</van-button>
</div>
</div>
<div class="info-bar">
<div>
<p>必选理由</p>
<p>hjkdashjkdhaasdsad</p>
</div>
<div>
<p>已委托</p>
<p>{{110}}票</p>
</div>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import { Button } from 'vant'
export default Vue.extend({
components: {
'van-button': Button
},
methods: {
goMining() {
this.$router.push({ path: '/details', query: {}})
}
}
})
</script>
<style lang="scss" scoped>
.mining-card {
position: relative;
background: #000;
border-radius: 5px;
.mining-name {
font-size: 12px;
position: absolute;
top: 5%;
left: -5px;
}
.mining-tips {
}
}
</style>
\ No newline at end of file
src/main.ts
View file @ 2602403e
......@@ -3,6 +3,9 @@ import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import 'vant/lib/index.css';
import '@/style.css'
Vue.config.productionTip = false
......
src/router/index.ts
View file @ 2602403e
import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
......@@ -8,16 +7,18 @@ const routes: Array<RouteConfig> = [
{
path: '/',
name: 'Home',
component: Home
component: () => import(/* webpackChunkName: "about" */ '../views/Home.vue')
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
path: '/details',
name: 'Details',
component: () => import(/* webpackChunkName: "about" */ '../views/Details.vue')
},
{
path: '/mine',
name: 'Mine',
component: () => import(/* webpackChunkName: "about" */ '../views/Mine.vue')
},
]
const router = new VueRouter({
......
src/style.css 0 → 100644
View file @ 2602403e
/*
.van-nav-bar {
}
.van-nav-bar .van-icon {
} */
\ No newline at end of file
src/views/About.vue deleted 100644 → 0
View file @ 4eb938d1
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
src/views/Details.vue 0 → 100644
View file @ 2602403e
<template>
<div class="details">
<nav-bar left-arrow title="矿机详情" @click-left="onClickLeft" />
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import { NavBar } from 'vant'
export default Vue.extend({
components: {
'nav-bar': NavBar
},
methods: {
onClickLeft() {
this.$router.back()
}
}
})
</script>
\ No newline at end of file
src/views/Home.vue
View file @ 2602403e
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
<div class="mine-card">
<div class="card-l">
<div class="card-l-t">当前地址： {{ 'xxxxxxx' }}</div>
<div class="card-l-b">
<div>
<p>可领收益</p>
<p>{{ 1000 }}</p>
</div>
<div>
<p>参与票数</p>
<p>{{ 100 }}</p>
</div>
</div>
</div>
<div class="card-r">
<van-button type="default" hairline size="small" @click="goMining">我的矿机</van-button>
<van-button type="default" hairline size="small">领取收益</van-button>
</div>
</div>
<div class="card-list">
<h4>矿池市场</h4>
<div>
<MiningCard />
</div>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
@Component({
import { Button } from 'vant'
import MiningCard from '@/components/MiningCard.vue'
import Vue from 'vue'
export default Vue.extend({
components: {
HelloWorld,
'van-button': Button,
MiningCard
},
methods: {
goMining() {
this.$router.push({ path: '/mine', query: {}})
}
}
})
export default class Home extends Vue {}
</script>
<style lang="scss" scoped>
.mine-card {
display: flex;
margin: 20px 25px;
padding: 5px 24px;
border: 1px solid #efefef;
.card-l {
flex: 3;
.card-l-t {
text-align: left;
}
.card-l-b {
display: flex;
div {
&:first-of-type {
margin-right: 8px;
}
}
}
}
.card-r {
flex: 1;
display: flex;
flex-direction: column;
button {
&:first-of-type {
margin-bottom: 12px;
}
}
}
}
.card-list {
padding: 12px 24px
}
</style>
src/views/Mine.vue 0 → 100644
View file @ 2602403e
<template>
<div class="mine">
<nav-bar left-arrow @click-left="onClickLeft">
<template #title>
<div>
<div @click="setTab(1)">进行中</div>
<div >已结束</div>
</div>
</template>
</nav-bar>
<div>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import { NavBar } from 'vant'
export default Vue.extend({
components: {
'nav-bar': NavBar,
},
data() {
return {
active: 1
}
},
methods: {
onClickLeft() {
this.$router.back()
},
setTab(n: number) {
console.log(n)
}
}
})
</script>
\ No newline at end of file
yarn.lock
View file @ 2602403e
This diff is collapsed.
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