init
This commit is contained in:
parent
7d2a9da289
commit
3f723365c7
5
babel.config.js
Executable file
5
babel.config.js
Executable file
@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
19
jsconfig.json
Executable file
19
jsconfig.json
Executable file
@ -0,0 +1,19 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"module": "esnext",
|
||||
"baseUrl": "./",
|
||||
"moduleResolution": "node",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"src/*"
|
||||
]
|
||||
},
|
||||
"lib": [
|
||||
"esnext",
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"scripthost"
|
||||
]
|
||||
}
|
||||
}
|
||||
27
package.json
Executable file
27
package.json
Executable file
@ -0,0 +1,27 @@
|
||||
{
|
||||
"name": "cooperation",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": "^3.8.3",
|
||||
"primeicons": "^7.0.0",
|
||||
"pug": "^3.0.3",
|
||||
"pug-plain-loader": "^1.1.0",
|
||||
"vue": "^3.2.13"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.16",
|
||||
"@babel/eslint-parser": "^7.12.16",
|
||||
"@vue/cli-plugin-babel": "~5.0.0",
|
||||
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||
"@vue/cli-service": "~5.0.0",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-vue": "^8.0.3",
|
||||
"vue-cli-plugin-windicss": "~1.1.6"
|
||||
}
|
||||
}
|
||||
BIN
public/favicon.ico
Executable file
BIN
public/favicon.ico
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
17
public/index.html
Executable file
17
public/index.html
Executable file
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
69
src/App.vue
Executable file
69
src/App.vue
Executable file
@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<div class="mx-auto bg-blue-600 max-w-86 relative">
|
||||
<header class="p-4 pt-12">
|
||||
<div class="flex flex-row">
|
||||
<div class="flex-1">
|
||||
<span class="font-sans text-xs text-gray-300">DemoDemo {{ activeArticle.id }}</span>
|
||||
<h1 class="font-bold text-white">Demo Demo</h1>
|
||||
</div>
|
||||
<div class="bg-white rounded-full flex bg-opacity-15 h-9 w-9 items-center justify-center">
|
||||
<div class="border-light-200 border-1 h-3 w-3 relative">
|
||||
<div class="rounded-full bg-yellow-400 h-2 -top-1 -right-1 w-2 absolute"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<ul class="bg-white rounded-xl flex bg-opacity-20 mx-10 text-white text-xs justify-around overflow-hidden">
|
||||
<li
|
||||
v-for="item in navbar.list"
|
||||
:key="item" class="rounded-md cursor-pointer bg-opacity-30 py-2 px-4"
|
||||
:class="{'bg-white': item===navbar.active }"
|
||||
@click="navbar.setPage(item)"
|
||||
>
|
||||
{{ item }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<PageHome v-if="navbar.active === '主页'" v-model:id=activeArticle.id />
|
||||
<PageQiye v-if="navbar.active === '企业'"/>
|
||||
<PageFile v-if="navbar.active === '文件'"/>
|
||||
<PageWeibo v-if="navbar.active === '微博'"/>
|
||||
<PageArticle v-if="activeArticle.id !== 0" class="top-0 right-0 bottom-0 left-0 absolute"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {reactive} from "vue"
|
||||
import PageHome from "./components/PageHome.vue"
|
||||
import PageFile from "./components/PageFile.vue"
|
||||
import PageWeibo from "./components/PageWeibo.vue"
|
||||
import PageQiye from "./components/PageQiye.vue"
|
||||
import PageArticle from "./components/PageArticle.vue"
|
||||
|
||||
const activeArticle = reactive({
|
||||
id: 0
|
||||
})
|
||||
|
||||
const navbar = reactive({
|
||||
list: ['主页', '企业', '文件', '微博'],
|
||||
active: '主页',
|
||||
setPage: name => {
|
||||
console.log("active:", name)
|
||||
navbar.active = name
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
color: #2c3e50;
|
||||
background: #fafafa;
|
||||
padding: 2rem;
|
||||
}
|
||||
</style>
|
||||
BIN
src/assets/logo.png
Executable file
BIN
src/assets/logo.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
28
src/components/PageArticle.vue
Executable file
28
src/components/PageArticle.vue
Executable file
@ -0,0 +1,28 @@
|
||||
<template lang="pug">
|
||||
main(class="bg-blue-500")
|
||||
div(class="flex items-center justify-between p-4 text-white")
|
||||
i.pi.pi-chevron-left
|
||||
div(class="rounded-t-2xl bg-white py-3 px-2 pb-16 mt-1 pb-120")
|
||||
div.flex.mb-2(class="items-center p-4")
|
||||
i.pi.pi-star.mr-2.text-yellow-400
|
||||
span(class="font-bold") 文章标题
|
||||
div.px-4
|
||||
p.my-2 xxx xxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx xxx xxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx
|
||||
div(class="h-32 bg-blue-600 text-white rounded-md")
|
||||
p.my-2 xxx xxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx xxx xxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx
|
||||
|
||||
span(class="font-sans text-gray-300 text-xs") 佚名
|
||||
span(class="font-sans text-gray-300 text-xs ml-2") 2024-12-02
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const data = [
|
||||
{ name: '1.file_name.zip', size: 12 },
|
||||
{ name: '2.file_name.zip', size: 12 },
|
||||
{ name: '3.file_name.zip', size: 12 },
|
||||
{ name: '4.file_name.zip', size: 12 },
|
||||
{ name: '5.file_name.zip', size: 12 },
|
||||
{ name: '6.file_name.zip', size: 12 },
|
||||
]
|
||||
</script>
|
||||
32
src/components/PageFile.vue
Executable file
32
src/components/PageFile.vue
Executable file
@ -0,0 +1,32 @@
|
||||
<template lang="pug">
|
||||
div(class="rounded-t-2xl bg-white py-3 px-2 pb-16 mt-6")
|
||||
div.flex.mb-2
|
||||
div.flex-1
|
||||
//span(class="text-gray-400 font-bold") File download
|
||||
div.flex
|
||||
div(class="rounded-md flex p-1 px-4")
|
||||
i.pi.pi-list
|
||||
ul(class="flex flex-col gap-3")
|
||||
li(v-for="(item, index) in data" :key="index" class="bg-white rounded-md flex shadow-lg py-2 px-4 shadow-gray-100")
|
||||
div(class="flex gap-2 w-12 items-center")
|
||||
div(class="w-8 h-8 bg-blue-500 rounded-xl text-white flex items-center justify-center")
|
||||
i.pi.pi-file
|
||||
div(class="flex gap-2 flex-1 flex-col")
|
||||
div.flex.gap-2.items-center.text-gray-500.text-md
|
||||
span.flex-1 {{ item.name }}
|
||||
span.font-sans.text-gray-400.text-sm 1.25MB
|
||||
span(class="font-sans text-gray-300 text-xs") 2024-12-02
|
||||
div(class="font-sans text-xs text-gray-300 flex items-center justify-center py-6")
|
||||
span 没有更多了..
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const data = [
|
||||
{ name: '1.file_name.zip', size: 12 },
|
||||
{ name: '2.file_name.zip', size: 12 },
|
||||
{ name: '3.file_name.zip', size: 12 },
|
||||
{ name: '4.file_name.zip', size: 12 },
|
||||
{ name: '5.file_name.zip', size: 12 },
|
||||
{ name: '6.file_name.zip', size: 12 },
|
||||
]
|
||||
</script>
|
||||
86
src/components/PageHome.vue
Normal file
86
src/components/PageHome.vue
Normal file
@ -0,0 +1,86 @@
|
||||
<template lang="pug">
|
||||
main(class="bg-white rounded-t-xl mt-17 p-4 pt-28 shadow-gray-200 relative")
|
||||
// 功能导航
|
||||
div(class="bg-white rounded-xl shadow-md mt-6 p-6 -top-22 shadow-gray-200 w-78 absolute")
|
||||
div(class="flex flex-row gap-1")
|
||||
div(class="flex flex-col gap-1" v-for="item in 22" :key="item")
|
||||
div.bg-blue-500.w-2.h-2(:style="{opacity: opacity()}" v-for="x in 7" :key="x")
|
||||
ul(class="flex flex-wrap mt-3 gap-2 justify-around")
|
||||
li(v-for="item in 功能" :key="item.name" class="flex flex-col justify-center items-center")
|
||||
div(class="rounded-xl bg-blue-500 h-8 w-8 flex justify-center items-center text-white")
|
||||
i.pi.pi-box
|
||||
span(class="font-sans text-xs mt-1") {{ item.name }}
|
||||
// 我的任务
|
||||
div(class="rounded-md shadow-md mt-6 p-6 shadow-gray-200 bg-white" v-for="x in 2" :key="x")
|
||||
div(class="flex flex-row flex-nowrap")
|
||||
div(class="font-bold flex-1 text-sm") 项目 (待处理, 已处理(传递))
|
||||
div(class="text-xs") 查看更多
|
||||
div
|
||||
ul
|
||||
li(v-for="item in 会议" :key="item.name" class="flex mt-1" @click="click()")
|
||||
span(class="font-sans text-sm pl-1 mr-2") {{ item.name }}
|
||||
span(class="font-sans text-xs text-gray-300 pl-1") {{ item.time }}
|
||||
div(class="font-sans text-xs text-gray-300 flex items-center justify-center py-6")
|
||||
span 没有更多了..
|
||||
PageArticle(v-if="article.show")
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, defineProps, defineEmits } from "vue"
|
||||
|
||||
const prop = defineProps({
|
||||
id: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:id'])
|
||||
const click = () => {
|
||||
emit('update:id', 123) //代表是将num值修改为123
|
||||
}
|
||||
|
||||
const article = reactive({
|
||||
show: true,
|
||||
id: 1,
|
||||
name: "这是一篇文章",
|
||||
date: "3分钟前",
|
||||
})
|
||||
|
||||
const 功能 = [
|
||||
{ name: "待办", count: 1 },
|
||||
{ name: "邮件", count: 1 },
|
||||
{ name: "抄送", count: 1 },
|
||||
{ name: "发起", count: 1 },
|
||||
]
|
||||
|
||||
const opacity = () => Math.floor(Math.random() * 10 + 1) / 10
|
||||
|
||||
const 会议 = [
|
||||
{ name: "1会议目标", status: "会议通知", time: "7月19日", date: "3分钟前" },
|
||||
{ name: "2会议目标", status: "会议通知", time: "7月18日", date: "2小时前" },
|
||||
{ name: "3会议目标", status: "会议通知", time: "今天下午", date: "昨天" },
|
||||
{ name: "4会议总结", status: "会议记录", time: "07月14日", date: "3月11日" },
|
||||
{ name: "5会议总结", status: "会议记录", time: "07月14日", date: "12月12日" },
|
||||
{ name: "6会议总结", status: "会议记录", time: "07月14日", date: "2023年12月" },
|
||||
{ name: "7会议总结", status: "会议记录", time: "07月14日", date: "2023年12月" },
|
||||
{ name: "8会议总结", status: "会议记录", time: "07月14日", date: "2023年12月" },
|
||||
]
|
||||
|
||||
const data = {
|
||||
list: [
|
||||
{ name: "通报栏" },
|
||||
{ name: "合同到期提醒" },
|
||||
],
|
||||
articles: [
|
||||
{ name: "1这是一篇文章", date: "3分钟前" },
|
||||
{ name: "2这是一篇文章", date: "2小时前" },
|
||||
{ name: "3这是一篇文章", date: "昨天" },
|
||||
{ name: "4这是一篇文章", date: "3月11日" },
|
||||
{ name: "5这是一篇文章", date: "12月12日" },
|
||||
{ name: "6这是一篇文章", date: "2023年12月" },
|
||||
{ name: "7这是一篇文章", date: "2023年12月" },
|
||||
{ name: "8这是一篇文章", date: "2023年12月" },
|
||||
],
|
||||
}
|
||||
</script>
|
||||
58
src/components/PageQiye.vue
Executable file
58
src/components/PageQiye.vue
Executable file
@ -0,0 +1,58 @@
|
||||
<template lang="pug">
|
||||
main(class="bg-white rounded-t-xl mt-6 p-4 pt-4 shadow-gray-200 relative")
|
||||
div(class="rounded-md shadow-md mt-6 p-6 shadow-gray-200")
|
||||
div(class="mb-2")
|
||||
ul(class="flex flex-row flex-nowrap gap-2 bg-blue-500 bg-opacity-20 rounded-md justify-around")
|
||||
li(
|
||||
v-for="item in data" :key="item.name"
|
||||
class="rounded-md cursor-pointer font-sans text-sm py-2 px-3"
|
||||
:class="{'bg-blue-500': item.name === '企业简介', 'text-white': item.name === '企业简介'}"
|
||||
) {{ item.name }}
|
||||
div
|
||||
ul
|
||||
li(v-for="article in articles" :key="article.name")
|
||||
span(class="font-sans text-sm mr-2") {{ article.name }}
|
||||
time(:datetime="article.date" class="font-sans text-xs text-gray-300") {{ article.date }}
|
||||
div(class="flex flex-row flex-nowrap justify-between items-center")
|
||||
div(class="flex flex-row flex-nowrap gap-2")
|
||||
// 各项列表
|
||||
div.rounded-md.shadow-md.mt-6.p-6.shadow-gray-200(v-for="item in list" :key="item.name")
|
||||
div.flex.flex-row.flex-nowrap
|
||||
div.flex-1.font-bold.text-sm {{ item.name }}
|
||||
div.text-xs 查看更多
|
||||
div
|
||||
ul
|
||||
li(v-for="article in articles" :key="article.name")
|
||||
span.text-sm {{ article.name }}
|
||||
time.font-sans.text-xs.text-gray-300.ml-1(:datetime="article.date") {{ article.date }}
|
||||
div(class="font-sans text-xs text-gray-300 flex items-center justify-center py-6")
|
||||
span 没有更多了..
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const data = [
|
||||
{ name: "企业简介" },
|
||||
{ name: "企业资质" },
|
||||
{ name: "发展历程" },
|
||||
]
|
||||
|
||||
const list = [
|
||||
{ name: "新闻中心" },
|
||||
{ name: "董监高专栏" },
|
||||
{ name: "海红语录" },
|
||||
{ name: "海红公益" },
|
||||
{ name: "通知通报" },
|
||||
{ name: "员工天地" },
|
||||
]
|
||||
|
||||
const articles = [
|
||||
{ name: "1这是一篇文章", date: "3分钟前" },
|
||||
{ name: "2这是一篇文章", date: "2小时前" },
|
||||
{ name: "3这是一篇文章", date: "昨天" },
|
||||
{ name: "4这是一篇文章", date: "3月11日" },
|
||||
{ name: "5这是一篇文章", date: "12月12日" },
|
||||
{ name: "6这是一篇文章", date: "2023年12月" },
|
||||
{ name: "7这是一篇文章", date: "2023年12月" },
|
||||
{ name: "8这是一篇文章", date: "2023年12月" },
|
||||
]
|
||||
</script>
|
||||
42
src/components/PageWeibo.vue
Executable file
42
src/components/PageWeibo.vue
Executable file
@ -0,0 +1,42 @@
|
||||
<template lang="pug">
|
||||
main(class="bg-white rounded-t-xl mt-6 p-4 pt-4 shadow-gray-200 relative")
|
||||
div.rounded-xl.overflow-hidden.relative
|
||||
textarea(cols="30", rows="3", class="rounded-xl bg-gray-100 border-0 tracking-wide w-full text-2xl placeholder:text-gray-400 focus:outline-none focus:ring-0")
|
||||
button(class="bg-blue-500 rounded-md text-white px-2 py-1 text-sm absolute bottom-4 right-2") Submit
|
||||
div.pt-2
|
||||
div.flex.flex-row-reverse
|
||||
div(class="rounded-md flex p-1 px-4")
|
||||
i.pi.pi-list
|
||||
ul(class="flex gap-3 flex-col py-4")
|
||||
li(v-for="item in data" :key="item.id" class="bg-white rounded-xl flex shadow-lg p-2 shadow-gray-100")
|
||||
div(class="flex justify-center")
|
||||
div(class="bg-blue-500 w-8 h-8 rounded-full mt-2")
|
||||
div(class="flex flex-col ml-2")
|
||||
div
|
||||
span(class="text-gray-500") user_name
|
||||
span(class="text-gray-400 text-sm ml-2") 2 hours ago
|
||||
div
|
||||
p(class="text-gray-500") xxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxx xxxx
|
||||
div(class="font-sans text-xs text-gray-300 flex items-center justify-center py-6")
|
||||
span 没有更多了..
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const data = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'All',
|
||||
active: true
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Active',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'Completed',
|
||||
active: false
|
||||
}
|
||||
]
|
||||
</script>
|
||||
6
src/main.js
Executable file
6
src/main.js
Executable file
@ -0,0 +1,6 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import 'primeicons/primeicons.css'
|
||||
import 'windi.css'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
5
vue.config.js
Executable file
5
vue.config.js
Executable file
@ -0,0 +1,5 @@
|
||||
const { defineConfig } = require('@vue/cli-service')
|
||||
module.exports = defineConfig({
|
||||
transpileDependencies: true,
|
||||
lintOnSave: false
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user