diff --git a/packageship/web-ui/.browserslistrc b/packageship/web-ui/.browserslistrc
new file mode 100644
index 0000000000000000000000000000000000000000..214388fe43cdfd7ce1c29cd3e401541ded620dba
--- /dev/null
+++ b/packageship/web-ui/.browserslistrc
@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead
diff --git a/packageship/web-ui/.eslintrc.js b/packageship/web-ui/.eslintrc.js
new file mode 100644
index 0000000000000000000000000000000000000000..948395b666ffdf677d191e6dfaed5278151d8a36
--- /dev/null
+++ b/packageship/web-ui/.eslintrc.js
@@ -0,0 +1,21 @@
+/**
+ * @file  代码规范配置文件
+ * */
+
+module.exports = {
+    root: true,
+    env: {
+        node: true
+    },
+    'extends': [
+        'plugin:vue/essential',
+        'eslint:recommended'
+    ],
+    parserOptions: {
+        parser: 'babel-eslint'
+    },
+    rules: {
+        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+    }
+};
\ No newline at end of file
diff --git a/packageship/web-ui/Dockerfile b/packageship/web-ui/Dockerfile
new file mode 100644
index 0000000000000000000000000000000000000000..bc3130832e5599de716f07606dde3ca2549910f4
--- /dev/null
+++ b/packageship/web-ui/Dockerfile
@@ -0,0 +1,24 @@
+FROM node:alpine as Builder
+
+MAINTAINER zhangxiaopan<zhangxiaopan2@huawei.com>
+
+RUN mkdir -p /home/openeuler/pkgwebui
+WORKDIR /home/openeuler/pkgwebui
+COPY . /home/openeuler/pkgwebui
+
+RUN npm install -g vue && \
+    npm install && \
+    npm run build
+
+FROM nginx:1.19.2
+
+COPY --from=Builder /home/openeuler/pkgwebui/dist /usr/share/nginx/html/
+RUN chmod -R 755 /usr/share/nginx/html
+COPY ./deploy/nginx/default.conf /etc/nginx/conf.d/
+
+ENV RUN_USER nginx
+ENV RUN_GROUP nginx
+EXPOSE 8080
+ENTRYPOINT ["nginx", "-g", "daemon off;"]
+
+
diff --git a/packageship/web-ui/README.md b/packageship/web-ui/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..362eb2092a92a02c95fa773b3c3e56b32e020c27
--- /dev/null
+++ b/packageship/web-ui/README.md
@@ -0,0 +1,24 @@
+# openeuler-v2
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/packageship/web-ui/babel.config.js b/packageship/web-ui/babel.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..e5921a25e798e8a22b7f3028d08dd8e0481fd35f
--- /dev/null
+++ b/packageship/web-ui/babel.config.js
@@ -0,0 +1,18 @@
+/**
+ * @file  babel配置文件
+ * */
+
+module.exports = {
+    presets: [
+        '@vue/cli-plugin-babel/preset'
+    ],
+    'plugins': [
+        [
+            'component',
+            {
+                'libraryName': 'element-ui',
+                'styleLibraryName': 'theme-chalk'
+            }
+        ]
+    ]
+};
\ No newline at end of file
diff --git a/packageship/web-ui/deploy/nginx/default.conf b/packageship/web-ui/deploy/nginx/default.conf
new file mode 100644
index 0000000000000000000000000000000000000000..29c058a68f8aa4c904fd3bebfad41db00c3080bb
--- /dev/null
+++ b/packageship/web-ui/deploy/nginx/default.conf
@@ -0,0 +1,18 @@
+server {
+    listen       8080;
+    include /etc/nginx/mime.types;
+    default_type application/octet-stream;
+    server_name  localhost;
+
+    #charset koi8-r;
+    #access_log  /var/log/nginx/host.access.log  main;
+
+    location / {
+        root   /usr/share/nginx/html;
+        index  /index.html;
+    }
+
+    location /api/ {
+        proxy_pass https://api.openeuler.org/pkgmanagedebug/;
+    }
+}
\ No newline at end of file
diff --git a/packageship/web-ui/package.json b/packageship/web-ui/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..1cda30914a7b1515f3af0707ace5f961c5b5263a
--- /dev/null
+++ b/packageship/web-ui/package.json
@@ -0,0 +1,34 @@
+{
+    "name": "Package-Management",
+    "version": "0.1.0",
+    "private": true,
+    "scripts": {
+        "serve": "vue-cli-service serve --port 80",
+        "build": "vue-cli-service build",
+        "lint": "vue-cli-service lint"
+    },
+    "dependencies": {
+        "axios": "^0.19.2",
+        "core-js": "^3.6.5",
+        "echarts": "^4.9.0",
+        "element-ui": "^2.13.2",
+        "vue": "^2.6.11",
+        "vue-i18n": "^8.18.2",
+        "vue-router": "^3.2.0"
+    },
+    "devDependencies": {
+        "@vue/cli-plugin-babel": "~4.4.0",
+        "@vue/cli-plugin-eslint": "~4.4.0",
+        "@vue/cli-plugin-router": "~4.4.0",
+        "@vue/cli-service": "~4.4.0",
+        "babel-eslint": "^10.1.0",
+        "babel-plugin-component": "^1.1.1",
+        "eslint": "^6.7.2",
+        "eslint-plugin-vue": "^6.2.2",
+        "less": "^3.0.4",
+        "less-loader": "^5.0.0",
+        "style-resources-loader": "^1.3.3",
+        "vue-cli-plugin-style-resources-loader": "^0.1.4",
+        "vue-template-compiler": "^2.6.11"
+    }
+}
diff --git a/packageship/web-ui/public/favicon.ico b/packageship/web-ui/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2
Binary files /dev/null and b/packageship/web-ui/public/favicon.ico differ
diff --git a/packageship/web-ui/public/index.html b/packageship/web-ui/public/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..622b5dd01027aad1c8fbc4e4aaacace1ffd9275c
--- /dev/null
+++ b/packageship/web-ui/public/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <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">
+</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>
\ No newline at end of file
diff --git a/packageship/web-ui/src/App.vue b/packageship/web-ui/src/App.vue
new file mode 100644
index 0000000000000000000000000000000000000000..33b4367d78aa21a51d0383bb078fc71859a21579
--- /dev/null
+++ b/packageship/web-ui/src/App.vue
@@ -0,0 +1,35 @@
+<template>
+    <div id="app" v-cloak :class="{'lang-cn': $i18n.locale==='zh-cn'}">
+        <i-header></i-header>
+        <div class="content">
+            <router-view />
+        </div>
+        <i-footer></i-footer>
+    </div>
+</template>
+
+<script>
+import header from "_c/header";
+import footer from "_c/footer";
+export default {
+    data() {
+        return {};
+    },
+    components: {
+        "i-header": header,
+        "i-footer": footer
+    }
+};
+</script>
+
+<style lang="less" scoped>
+[v-cloak] {
+    display: none !important;
+}
+.content {
+    min-height: calc(100vh - 110px - 176px);
+    @media (max-width: 1000px) {
+        min-height: calc(100vh - 70px - 280px);
+    }
+}
+</style>
diff --git a/packageship/web-ui/src/api/issue.js b/packageship/web-ui/src/api/issue.js
new file mode 100644
index 0000000000000000000000000000000000000000..6f6a09dfab542881fe41a22110addd02ce190688
--- /dev/null
+++ b/packageship/web-ui/src/api/issue.js
@@ -0,0 +1,76 @@
+/**
+ * @file  包管理 issue接口配置文件
+ * */
+
+import appAjax from './../libs/ajax-utils';
+export const issueList = ({
+  pageNum,
+  pageSize,
+  issueType,
+  issueStatus
+}) => {
+    return new Promise((resolve, reject) => {
+        appAjax.postJson({
+            url: '/lifeCycle/issuetrace',
+            type: 'get',
+            params: {
+                page_num: pageNum,
+                page_size: pageSize,
+                issue_type: issueType,
+                issue_status: issueStatus
+            },
+            success(result) {
+                if (result) {
+                    resolve(result);
+                    return;
+                }
+                reject(result);
+            },
+            error(msg) {
+                reject(msg);
+            }
+
+        });
+
+    });
+};
+
+export const issueType = () => {
+    return new Promise((resolve, reject) => {
+        appAjax.postJson({
+            url: '/lifeCycle/issuetype',
+            type: 'get',
+            success(result) {
+                if (result) {
+                    resolve(result);
+                    return;
+                }
+                reject(result);
+            },
+            error(msg) {
+                reject(msg);
+            }
+
+        });
+
+    });
+};
+
+export const issueStatus = () =>  new Promise((resolve, reject) => {
+        appAjax.postJson({
+            url: '/lifeCycle/issuestatus',
+            type: 'get',
+            success(result) {
+                if (result) {
+                    resolve(result);
+                    return;
+                }
+                reject(result);
+            },
+            error(msg) {
+                reject(msg);
+            }
+
+        });
+
+    });
diff --git a/packageship/web-ui/src/api/repo.js b/packageship/web-ui/src/api/repo.js
new file mode 100644
index 0000000000000000000000000000000000000000..4786ad4c9f588c3a08e3b077a62edac1865da43c
--- /dev/null
+++ b/packageship/web-ui/src/api/repo.js
@@ -0,0 +1,127 @@
+/**
+ * @file  包管理接口配置文件
+ * */
+
+import appAjax from './../libs/ajax-utils';
+export const packages = ({
+    pageNum,
+    pageSize,
+    tableName,
+    queryPkgName,
+    maintainer,
+    maintainlevel
+}) => {
+    return new Promise((resolve, reject) => {
+        appAjax.postJson({
+            url: '/packages',
+            type: 'get',
+            params: {
+                page_num: pageNum,
+                page_size: pageSize,
+                table_name: tableName,
+                query_pkg_name: queryPkgName,
+                maintainer,
+                maintainlevel
+            },
+            success(result) {
+                if (result) {
+                    resolve(result);
+                    return;
+                }
+                reject(result);
+            },
+            error(msg) {
+                reject(msg);
+            }
+
+        });
+
+    });
+};
+export const productVersion = () => {
+    return new Promise((resolve, reject) => {
+        appAjax.postJson({
+            url: '/lifeCycle/tables',
+            type: 'get',
+            success(result) {
+                if (result) {
+                    resolve(result);
+                    return;
+                }
+                reject(result);
+            },
+            error(msg) {
+                reject(msg);
+            }
+
+        });
+
+    });
+};
+
+export const tableCol = () => {
+    return new Promise((resolve, reject) => {
+        appAjax.postJson({
+            url: '/packages/tablecol',
+            type: 'get',
+            success(result) {
+                if (result) {
+                    resolve(result);
+                    return;
+                }
+                reject(result);
+            },
+            error(msg) {
+                reject(msg);
+            }
+
+        });
+
+    });
+};
+
+export const packageDetail = ({table_name, pkg_name}) => {
+    return new Promise((resolve, reject) => {
+        appAjax.postJson({
+            url: '/packages/packageInfo',
+            type: 'get',
+            params: {
+                table_name,
+                pkg_name
+            },
+            success(result) {
+                if (result) {
+                    resolve(result);
+                    return;
+                }
+                reject(result);
+            },
+            error(msg) {
+                reject(msg);
+            }
+
+        });
+
+    });
+};
+
+export const maintainer = () => {
+    return new Promise((resolve, reject) => {
+        appAjax.postJson({
+            url: '/lifeCycle/maintainer',
+            type: 'get',
+            success(result) {
+                if (result) {
+                    resolve(result);
+                    return;
+                }
+                reject(result);
+            },
+            error(msg) {
+                reject(msg);
+            }
+
+        });
+
+    });
+};
\ No newline at end of file
diff --git a/packageship/web-ui/src/assets/fonts/FZLTCHJW.TTF b/packageship/web-ui/src/assets/fonts/FZLTCHJW.TTF
new file mode 100644
index 0000000000000000000000000000000000000000..2ba2430be2cfc3bb6de1f2870b6d5364ad69e1e3
Binary files /dev/null and b/packageship/web-ui/src/assets/fonts/FZLTCHJW.TTF differ
diff --git a/packageship/web-ui/src/assets/fonts/FZLTHJW.TTF b/packageship/web-ui/src/assets/fonts/FZLTHJW.TTF
new file mode 100644
index 0000000000000000000000000000000000000000..379dc975c37291aa56568ff1f078ed12345a280e
Binary files /dev/null and b/packageship/web-ui/src/assets/fonts/FZLTHJW.TTF differ
diff --git a/packageship/web-ui/src/assets/fonts/FZLTXIHJW.TTF b/packageship/web-ui/src/assets/fonts/FZLTXIHJW.TTF
new file mode 100644
index 0000000000000000000000000000000000000000..5800b22a5e222d3a42a35fb91b020f806520ed23
Binary files /dev/null and b/packageship/web-ui/src/assets/fonts/FZLTXIHJW.TTF differ
diff --git a/packageship/web-ui/src/assets/fonts/HuaweiSans-Bold.ttf b/packageship/web-ui/src/assets/fonts/HuaweiSans-Bold.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..f3a838546d3141c6684098f77bdaa763db8e5ffe
Binary files /dev/null and b/packageship/web-ui/src/assets/fonts/HuaweiSans-Bold.ttf differ
diff --git a/packageship/web-ui/src/assets/fonts/HuaweiSans-Light.ttf b/packageship/web-ui/src/assets/fonts/HuaweiSans-Light.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..d3b3ac183eab2eb6e69b7b49905157b72dffdf47
Binary files /dev/null and b/packageship/web-ui/src/assets/fonts/HuaweiSans-Light.ttf differ
diff --git a/packageship/web-ui/src/assets/fonts/HuaweiSans-Medium.ttf b/packageship/web-ui/src/assets/fonts/HuaweiSans-Medium.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..6878ed7c64b5f0d0ac4c24f3fcbfba9aa90e58a1
Binary files /dev/null and b/packageship/web-ui/src/assets/fonts/HuaweiSans-Medium.ttf differ
diff --git a/packageship/web-ui/src/assets/fonts/HuaweiSans-Regular.ttf b/packageship/web-ui/src/assets/fonts/HuaweiSans-Regular.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..3118eaffb6d174531b17061c8c133b591256e152
Binary files /dev/null and b/packageship/web-ui/src/assets/fonts/HuaweiSans-Regular.ttf differ
diff --git a/packageship/web-ui/src/assets/fonts/Roboto-Black.ttf b/packageship/web-ui/src/assets/fonts/Roboto-Black.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..86ec2b29ba56a3d6c45f1a8584ff3780fa70c60e
Binary files /dev/null and b/packageship/web-ui/src/assets/fonts/Roboto-Black.ttf differ
diff --git a/packageship/web-ui/src/assets/fonts/Roboto-BlackItalic.ttf b/packageship/web-ui/src/assets/fonts/Roboto-BlackItalic.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..1904c99b2c81e3e278d3c373f397b38049824d4c
Binary files /dev/null and b/packageship/web-ui/src/assets/fonts/Roboto-BlackItalic.ttf differ
diff --git a/packageship/web-ui/src/assets/fonts/Roboto-Bold.ttf b/packageship/web-ui/src/assets/fonts/Roboto-Bold.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..91ec21227866ca9d1cf77ec13660b7b85ec900dd
Binary files /dev/null and b/packageship/web-ui/src/assets/fonts/Roboto-Bold.ttf differ
diff --git a/packageship/web-ui/src/assets/fonts/Roboto-Light.ttf b/packageship/web-ui/src/assets/fonts/Roboto-Light.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..d43e943312e0f2c653815dd791d93f94f0abd73f
Binary files /dev/null and b/packageship/web-ui/src/assets/fonts/Roboto-Light.ttf differ
diff --git a/packageship/web-ui/src/assets/fonts/Roboto-Medium.ttf b/packageship/web-ui/src/assets/fonts/Roboto-Medium.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..87983419893a8952c3f286dc56d37fb94e320da0
Binary files /dev/null and b/packageship/web-ui/src/assets/fonts/Roboto-Medium.ttf differ
diff --git a/packageship/web-ui/src/assets/fonts/Roboto-Regular.ttf b/packageship/web-ui/src/assets/fonts/Roboto-Regular.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..7d9a6c4c32d7e920b549caf531e390733496b6e0
Binary files /dev/null and b/packageship/web-ui/src/assets/fonts/Roboto-Regular.ttf differ
diff --git a/packageship/web-ui/src/assets/fonts/icomoon.eot b/packageship/web-ui/src/assets/fonts/icomoon.eot
new file mode 100644
index 0000000000000000000000000000000000000000..296ebc035c5b8d333fc5b33d192e9aab34674455
Binary files /dev/null and b/packageship/web-ui/src/assets/fonts/icomoon.eot differ
diff --git a/packageship/web-ui/src/assets/fonts/icomoon.svg b/packageship/web-ui/src/assets/fonts/icomoon.svg
new file mode 100644
index 0000000000000000000000000000000000000000..5993cbfc3e08ce844a2560a3c02a5b559c3db9a4
--- /dev/null
+++ b/packageship/web-ui/src/assets/fonts/icomoon.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe900;" glyph-name="OutlinedUImenu_mobile" horiz-adv-x="1138" d="M1123.556 21.333v-85.333h-1109.333v85.333h1109.333zM952.889 490.667v-85.333h-938.667v85.333h938.667zM1123.556 960v-85.333h-1109.333v85.333h1109.333z" />
+<glyph unicode="&#xe901;" glyph-name="arrow-right" d="M772.283 425.607c13.88 13.879 13.88 36.411 0 50.292-1.033 1.033-2.384 1.462-3.49 2.281-1.315 2.094-2.208 4.303-4.021 6.121l-464.616 464.578c-13.524 13.564-35.412 13.564-48.903 0-13.524-13.486-13.524-35.379 0-48.864l447.353-447.393-454.864-454.903c-13.914-13.914-13.914-36.445 0-50.359 13.915-13.881 36.412-13.881 50.327 0l478.214 478.247z" />
+<glyph unicode="&#xe902;" glyph-name="search" d="M968.843 51.499l-242.144 242.144c52.31 64.848 83.969 148.258 83.969 239.062 0 0.221 0 0.442-0.001 0.664v-0.035c0 212.075-171.915 384-384 384-212.075 0-384-171.925-384-384s171.925-384 384-384c90.667 0 173.995 31.413 239.691 83.979l242.144-242.144c7.686-7.522 18.218-12.164 29.833-12.164 23.564 0 42.667 19.103 42.667 42.667 0 11.613-4.639 22.142-12.166 29.835l0.008-0.008zM426.667 234.667c-164.949 0-298.667 133.717-298.667 298.667s133.717 298.667 298.667 298.667c164.96 0 298.667-133.717 298.667-298.667s-133.707-298.667-298.667-298.667z" />
+</font></defs></svg>
\ No newline at end of file
diff --git a/packageship/web-ui/src/assets/fonts/icomoon.ttf b/packageship/web-ui/src/assets/fonts/icomoon.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..4d22f59786856202df95442ab1af225a53a7a1e3
Binary files /dev/null and b/packageship/web-ui/src/assets/fonts/icomoon.ttf differ
diff --git a/packageship/web-ui/src/assets/fonts/icomoon.woff b/packageship/web-ui/src/assets/fonts/icomoon.woff
new file mode 100644
index 0000000000000000000000000000000000000000..04a91af85e46766f2d489439cef5f58fa209467b
Binary files /dev/null and b/packageship/web-ui/src/assets/fonts/icomoon.woff differ
diff --git a/packageship/web-ui/src/assets/images/Gitee.png b/packageship/web-ui/src/assets/images/Gitee.png
new file mode 100644
index 0000000000000000000000000000000000000000..bb68b9c00d7cef5091a97d5d589cdbbf76374990
Binary files /dev/null and b/packageship/web-ui/src/assets/images/Gitee.png differ
diff --git a/packageship/web-ui/src/assets/images/column.svg b/packageship/web-ui/src/assets/images/column.svg
new file mode 100644
index 0000000000000000000000000000000000000000..48afb28d4def283a58d91965748dcee773919246
--- /dev/null
+++ b/packageship/web-ui/src/assets/images/column.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="26px" height="21px" viewBox="0 0 26 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>形状结合</title>
+    <g id="控件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="icon可点击" transform="translate(-42.000000, -760.000000)" fill="#000000">
+            <path d="M52,768 C53.1045695,768 54,768.895431 54,770 L54,781 C54,782.104569 53.1045695,783 52,783 L47,783 C45.8954305,783 45,782.104569 45,781 L45,770 C45,768.895431 45.8954305,768 47,768 L52,768 Z M63,775 C64.1045695,775 65,775.895431 65,777 L65,781 C65,782.104569 64.1045695,783 63,783 L58,783 C56.8954305,783 56,782.104569 56,781 L56,777 C56,775.895431 56.8954305,775 58,775 L63,775 Z M51,769.764706 L48,769.764706 C47.4871642,769.764706 47.0644928,770.150746 47.0067277,770.648085 L47,770.764706 L47,780.235294 C47,780.74813 47.3860402,781.170801 47.8833789,781.228566 L48,781.235294 L51,781.235294 C51.5128358,781.235294 51.9355072,780.849254 51.9932723,780.351915 L52,780.235294 L52,770.764706 C52,770.212421 51.5522847,769.764706 51,769.764706 Z M62,776.777778 L59,776.777778 C58.4871642,776.777778 58.0644928,777.163818 58.0067277,777.661157 L58,777.777778 L58,780.222222 C58,780.735058 58.3860402,781.157729 58.8833789,781.215494 L59,781.222222 L62,781.222222 C62.5128358,781.222222 62.9355072,780.836182 62.9932723,780.338843 L63,780.222222 L63,777.777778 C63,777.225493 62.5522847,776.777778 62,776.777778 Z M63,758 C64.1045695,758 65,758.895431 65,760 L65,771 C65,772.104569 64.1045695,773 63,773 L58,773 C56.8954305,773 56,772.104569 56,771 L56,760 C56,758.895431 56.8954305,758 58,758 L63,758 Z M62,759.764706 L59,759.764706 C58.4871642,759.764706 58.0644928,760.150746 58.0067277,760.648085 L58,760.764706 L58,770.235294 C58,770.74813 58.3860402,771.170801 58.8833789,771.228566 L59,771.235294 L62,771.235294 C62.5128358,771.235294 62.9355072,770.849254 62.9932723,770.351915 L63,770.235294 L63,760.764706 C63,760.212421 62.5522847,759.764706 62,759.764706 Z M52,758 C53.1045695,758 54,758.895431 54,760 L54,764 C54,765.104569 53.1045695,766 52,766 L47,766 C45.8954305,766 45,765.104569 45,764 L45,760 C45,758.895431 45.8954305,758 47,758 L52,758 Z M51,759.777778 L48,759.777778 C47.4871642,759.777778 47.0644928,760.163818 47.0067277,760.661157 L47,760.777778 L47,763.222222 C47,763.735058 47.3860402,764.157729 47.8833789,764.215494 L48,764.222222 L51,764.222222 C51.5128358,764.222222 51.9355072,763.836182 51.9932723,763.338843 L52,763.222222 L52,760.777778 C52,760.225493 51.5522847,759.777778 51,759.777778 Z" id="形状结合" transform="translate(55.000000, 770.500000) rotate(-270.000000) translate(-55.000000, -770.500000) "></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/packageship/web-ui/src/assets/images/dowmload.svg b/packageship/web-ui/src/assets/images/dowmload.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0dd2ff5cda735dfffeba4f7299169d1c4cc59d54
--- /dev/null
+++ b/packageship/web-ui/src/assets/images/dowmload.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="28px" height="24px" viewBox="0 0 28 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Style</title>
+    <g id="控件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="icon可点击" transform="translate(-415.000000, -59.000000)" fill="#252C32">
+            <path d="M438.006573,57 C439.663428,57 441.006573,58.3431458 441.006573,60 L441.006573,60 L441.006573,82 C441.006573,83.6568543 439.663428,85 438.006573,85 L438.006573,85 L429.006573,85 L429.006573,83 L438.006573,83 C438.558858,83 439.006573,82.5522848 439.006573,82 L439.006573,82 L439.006573,60 C439.006573,59.4477153 438.558858,59 438.006573,59 L438.006573,59 L429.006573,59 L429.006573,57 Z M429,64.55 L434,69.55 C434.375554,69.9251366 434.586573,70.4341815 434.586573,70.965 C434.586573,71.4958185 434.375554,72.0048635 434,72.3800001 L434,72.3800001 L429,77.3800001 L427.58,75.9300001 L431.58,71.93 L417,71.93 L417,69.93 L431.58,69.93 L427.58,65.93 L429,64.55 Z" id="Style" transform="translate(429.003287, 71.000000) rotate(-270.000000) translate(-429.003287, -71.000000) "></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/packageship/web-ui/src/assets/images/footer-logo.png b/packageship/web-ui/src/assets/images/footer-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..e029c8d7daad57c231228b2140a505fcf93b8e79
Binary files /dev/null and b/packageship/web-ui/src/assets/images/footer-logo.png differ
diff --git a/packageship/web-ui/src/assets/images/lang.png b/packageship/web-ui/src/assets/images/lang.png
new file mode 100644
index 0000000000000000000000000000000000000000..4d968b6ba46e2d3fabf1d0806c5f32ef96e30c4d
Binary files /dev/null and b/packageship/web-ui/src/assets/images/lang.png differ
diff --git a/packageship/web-ui/src/assets/images/logo-mobile.png b/packageship/web-ui/src/assets/images/logo-mobile.png
new file mode 100644
index 0000000000000000000000000000000000000000..d26be4e7ac88b84d44dc593059afcfe274986b28
Binary files /dev/null and b/packageship/web-ui/src/assets/images/logo-mobile.png differ
diff --git a/packageship/web-ui/src/assets/images/menu-mobile.png b/packageship/web-ui/src/assets/images/menu-mobile.png
new file mode 100644
index 0000000000000000000000000000000000000000..aaa0e59a59327cde15d49037b5a01f1bee3c1f3b
Binary files /dev/null and b/packageship/web-ui/src/assets/images/menu-mobile.png differ
diff --git a/packageship/web-ui/src/assets/images/openeuler.png b/packageship/web-ui/src/assets/images/openeuler.png
new file mode 100644
index 0000000000000000000000000000000000000000..f7da72fd7ddd2a0965f8dd90ece4094b00a59e0b
Binary files /dev/null and b/packageship/web-ui/src/assets/images/openeuler.png differ
diff --git a/packageship/web-ui/src/assets/images/search.png b/packageship/web-ui/src/assets/images/search.png
new file mode 100644
index 0000000000000000000000000000000000000000..11ee04ea7e4fa8872035b5b1451e3f8e06954f9b
Binary files /dev/null and b/packageship/web-ui/src/assets/images/search.png differ
diff --git a/packageship/web-ui/src/assets/style/base.css b/packageship/web-ui/src/assets/style/base.css
new file mode 100644
index 0000000000000000000000000000000000000000..d7a2de0df496c01ce297142089add4623fb5c045
--- /dev/null
+++ b/packageship/web-ui/src/assets/style/base.css
@@ -0,0 +1,181 @@
+/* CSS Document */
+/*css reset*/
+html {
+    box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+}
+
+body,
+div,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+pre,
+form,
+fieldset,
+input,
+textarea,
+p,
+blockquote,
+th,
+td {
+    margin: 0;
+    padding: 0;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+fieldest,
+img {
+    border: 0;
+}
+
+address,
+caption,
+cite,
+code,
+dfn,
+em,
+strong,
+th,
+var {
+    font-style: normal;
+    font-weight: normal;
+}
+
+ol,
+ul {
+    list-style: none;
+}
+
+caption,
+th {
+    text-align: left;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-size: 100%;
+    font-weight: normal;
+}
+
+p:before,
+q:after {
+    content: "";
+}
+
+abbr,
+acronym {
+    border: 0;
+}
+
+/*定位*/
+.tl {
+    text-align: left;
+}
+
+.tc {
+    text-align: center;
+}
+
+.tr {
+    text-align: right;
+}
+
+.bc {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.fl {
+    float: left;
+}
+
+.fr {
+    float: right;
+}
+
+.cb {
+    clear: both;
+}
+
+.cl {
+    clear: left;
+}
+
+.cr {
+    clear: right;
+}
+
+.clearfix:after {
+    content: ".";
+    display: block;
+    height: 0;
+    clear: both;
+    visibility: hidden;
+}
+
+.clearfix {
+    display: inline-block;
+}
+
+@font-face {
+    font-family: "icomoon";
+    src:  url(../fonts/icomoon.eot?4mtq8t);
+    src:  url(../fonts/icomoon.eot?4mtq8t#iefix) format('embedded-opentype'),
+        url(../fonts/icomoon.ttf?4mtq8t) format('truetype'),
+        url(../fonts/icomoon.woff?4mtq8t) format('woff'),
+        url(../fonts/icomoon.svg?4mtq8t#icomoon) format('svg');
+    font-weight: normal;
+    font-style: normal;
+    font-display: block;
+}
+  
+    [class^="icon-"],
+    [class*=" icon-"] {
+        /* use !important to prevent issues with browser extensions that change fonts */
+        font-family: "icomoon" !important;
+        speak: never;
+        font-style: normal;
+        font-weight: normal;
+        font-variant: normal;
+        text-transform: none;
+        line-height: 1;
+
+        /* Better Font Rendering =========== */
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+  
+    .icon-menu:before {
+        content: "\e900";
+    }
+
+    .icon-arrow:before {
+        content: "\e901";
+    }
+
+    .icon-search:before {
+        content: "\e902";
+    }
\ No newline at end of file
diff --git a/packageship/web-ui/src/assets/style/font-cn.css b/packageship/web-ui/src/assets/style/font-cn.css
new file mode 100644
index 0000000000000000000000000000000000000000..17b9e3ed8495169bafe99e86cd43c92bb2ab589a
--- /dev/null
+++ b/packageship/web-ui/src/assets/style/font-cn.css
@@ -0,0 +1,17 @@
+@font-face {
+    font-family: "FZLTHJW";
+    src: url(../fonts/FZLTHJW.TTF);
+}
+@font-face {
+    font-family: "FZLTCHJW";
+    src: url(../fonts/FZLTCHJW.TTF);
+}
+
+@font-face {
+    font-family: "FZLTHJW";
+    src: url(../fonts/FZLTHJW.TTF);
+}
+@font-face {
+    font-family: "FZLTXIHJW";
+    src: url(../fonts/FZLTXIHJW.TTF);
+}
\ No newline at end of file
diff --git a/packageship/web-ui/src/assets/style/font-en.css b/packageship/web-ui/src/assets/style/font-en.css
new file mode 100644
index 0000000000000000000000000000000000000000..1bb936bb472e11d7e2a518da00c410b692f0737c
--- /dev/null
+++ b/packageship/web-ui/src/assets/style/font-en.css
@@ -0,0 +1,40 @@
+@font-face {
+    font-family: "HuaweiSans-Bold";
+    src: url(../fonts/HuaweiSans-Bold.ttf);
+}
+@font-face {
+    font-family: "HuaweiSans-Light";
+    src: url(../fonts/HuaweiSans-Light.ttf);
+}
+@font-face {
+    font-family: "HuaweiSans-Medium";
+    src: url(../fonts/HuaweiSans-Medium.ttf);
+}
+@font-face {
+    font-family: "HuaweiSans";
+    src: url(../fonts/HuaweiSans-Regular.ttf);
+}
+@font-face {
+    font-family: "Roboto-Black";
+    src: url(../fonts/Roboto-Black.ttf);
+}
+@font-face {
+    font-family: "Roboto-BlackItalic";
+    src: url(../fonts/Roboto-BlackItalic.ttf);
+}
+@font-face {
+    font-family: "Roboto-Bold";
+    src: url(../fonts/Roboto-Bold.ttf);
+}
+@font-face {
+    font-family: "Roboto-Light";
+    src: url(../fonts/Roboto-Light.ttf);
+}
+@font-face {
+    font-family: "Roboto-Medium";
+    src: url(../fonts/Roboto-Medium.ttf);
+}
+@font-face {
+    font-family: "Roboto-Regular";
+    src: url(../fonts/Roboto-Regular.ttf);
+}
\ No newline at end of file
diff --git a/packageship/web-ui/src/assets/style/vars.less b/packageship/web-ui/src/assets/style/vars.less
new file mode 100644
index 0000000000000000000000000000000000000000..372d0dc7afdfc4396a90d71ebc8dc14393b96d67
--- /dev/null
+++ b/packageship/web-ui/src/assets/style/vars.less
@@ -0,0 +1,61 @@
+@primary-color: #002FA7; //主色
+@primary-color2: #0041BD; //主色2
+@text-white: #fff;
+@text-dark: #000;
+@text-dark2: #0B162B;
+@text-light: rgba(0, 0, 0, 0.85);
+@text-lighter: rgba(0, 0, 0, 0.7);
+@text-lightest: rgba(0, 0, 0, 0.5);
+
+.ff-h(){
+    font-family: FZLTHJW;
+}
+.ff-xih(){
+    font-family: FZLTXIHJW;
+}
+.ff-ch(){
+    font-family: FZLTCHJW;
+}
+.ff-hwsans(){
+    font-family: HuaweiSans;
+}
+.ff-hwsans-b(){
+    font-family: HuaweiSans-Bold;
+}
+.ff-hwsans-m(){
+    font-family: HuaweiSans-Medium;
+}
+.ff-pfsc-r(){
+    font-family: PingFangSC-Regular;
+}
+
+.fz20(){
+    font-size: 20px;
+}
+.fz18(){
+    font-size: 18px;
+}
+.fz16(){
+    font-size: 16px;
+}
+.fz14(){
+    font-size: 14px;
+}
+.fz12(){
+    font-size: 12px;
+}
+.fz60(){
+    font-size: 60px;
+}
+.fz40(){
+    font-size: 40px;
+}
+.fz24(){
+    font-size: 24px;
+}
+.fz36(){
+    font-size: 36px;
+}
+.fz72(){
+    font-size: 72px;
+}
\ No newline at end of file
diff --git a/packageship/web-ui/src/components/footer.vue b/packageship/web-ui/src/components/footer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b61746eeeadf4bc2db773191870df43994944dc7
--- /dev/null
+++ b/packageship/web-ui/src/components/footer.vue
@@ -0,0 +1,102 @@
+<template>
+    <div class="footer-wrapper">
+        <div class="footer-content">
+            <div class="footer-left">
+                <img src="@/assets/images/footer-logo.png" class="footer-logo">
+                <div class="footer-mail">{{ $t("common.footer.mail") }}</div>
+            </div>
+            <div class="footer-right">
+                <ul class="right-list">
+                    <li v-for="(item, index) in $t('common.footer.rightList')" :key="index"><a href="/">{{ item }}</a></li>
+                </ul>
+                <p class="footer-copyright">{{ $t("common.footer.copyright") }}</p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {};
+    },
+    components: {}
+};
+</script>
+
+<style lang="less" scoped>
+.footer-wrapper {
+    height: 176px;
+    background-color: #111;
+    @media (max-width: 1000px) {
+        height: 280px;
+    }
+    .footer-content {
+        .ff-xih();
+        margin: 0 auto;
+        height: 100%;
+        width: 1200px;
+        display: flex;
+        justify-content: space-between;
+        @media (max-width: 1000px) {
+            flex-direction: column;
+            align-items: center;
+            width: 100%;
+
+        }
+        .footer-left {
+            @media (max-width: 1000px) {
+                height: 50%;
+            }
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            .fz16();
+            .footer-mail {
+                color: @text-white;
+                margin-top: 17px;
+            }
+        }
+        .footer-right {
+            @media (max-width: 1000px) {
+                height: 50%;
+                align-items: unset;
+                padding-bottom: 67px;
+            }
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: flex-end;
+            .footer-copyright {
+                color: #fff;
+                margin-top: 21px;
+                .fz12();
+            }
+            .right-list {
+                display: flex;
+                align-items: flex-end;
+                .fz14();
+                li {
+                    padding: 0 15px;  
+                    a {
+                        color: #fff;
+                        text-decoration: none;
+                    } 
+                }
+                li:nth-child(2){
+                    padding: 0 16px;
+                    border-left: 1px solid #fff;
+                    border-right: 1px solid #fff;
+                }
+                li:nth-child(3){
+                    padding-right: 0;
+                }
+               
+            }
+        }
+    }
+    
+}
+</style>
diff --git a/packageship/web-ui/src/components/header.vue b/packageship/web-ui/src/components/header.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fc2bd2a70eeefd87b6dfd7fef65f911df699b8b2
--- /dev/null
+++ b/packageship/web-ui/src/components/header.vue
@@ -0,0 +1,448 @@
+<template>
+    <div class="nav-fill">
+        <div class="nav-wrapper">
+            <div class="nav-bar">
+                <img
+                        src="@/assets/images/openeuler.png"
+                        alt=""
+                        class="nav-logo"
+                        @click="go('/')"
+                />
+                <img
+                        src="@/assets/images/logo-mobile.png"
+                        alt=""
+                        class="nav-logo nav-logo-mobile"
+                        @click="go('/')"
+                />
+                <div
+                        :class="{ mask: menuMobileFlag }"
+                        @click="menuMobileFlag = false"
+                ></div>
+                <ul class="nav-other">
+                    <li>
+                        <img src="@/assets/images/Gitee.png" alt="" />
+                        <span>{{ $t("common.gitee") }}</span>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                toggleSubMenu: [],
+                menuActivePath: "",
+                menuMobileFlag: false,
+                searchData: "",
+                searchFlag: false
+            };
+        },
+        mounted() {},
+        methods: {
+            go(path) {
+                if (path) {
+                    this.$router.push(path);
+                    this.menuMobileFlag = false;
+                }
+            },
+            showSub(toggleClass) {
+                toggleClass.push("show-sub-menu");
+            },
+            hideSub(toggleClass) {
+                toggleClass.pop();
+            },
+            toggleLang() {
+                const locale = this.$i18n.locale === "zh-cn" ? "zh-en" : "zh-cn";
+                window.localStorage.setItem("locale", locale);
+                window.location.reload(true);
+            },
+            menuActiveFn(item) {
+                let $route = this.$route;
+                return (
+                    $route.path === item.path ||
+                    $route.path === item.subPath ||
+                    $route.path === item.viewAllPath ||
+                    item.children.some(item => item.path === $route.path)
+                );
+            },
+            toggleMenuMobile() {
+                this.searchFlag = false;
+                this.menuMobileFlag = !this.menuMobileFlag;
+            },
+            toggleSub(item) {
+                if (item.path) {
+                    this.$router.push(item.path);
+                    this.menuMobileFlag = false;
+                    return;
+                }
+                if (item.class.length) {
+                    item.class.pop();
+                } else {
+                    item.class.push("arrow-active");
+                }
+                console.log(item.class);
+            },
+            subMenuMobileFn(item) {
+                let $route = this.$route;
+                return (
+                    item.class.indexOf("arrow-active") > 0 ||
+                    $route.path === item.path ||
+                    $route.path === item.subPath ||
+                    $route.path === item.viewAllPath ||
+                    item.children.some(item => item.path === $route.path)
+                );
+            },
+            toggleSearchMobile() {
+                this.menuMobileFlag = false;
+                this.searchFlag = !this.searchFlag;
+            }
+        }
+    };
+</script>
+<style lang="less" scoped>
+    .el-input {
+        width: 80%;
+        margin: 9px;
+    }
+</style>
+<style lang="less" scoped>
+    @keyframes fade-in {
+        0% {
+            opacity: 0;
+            top: -110px;
+        }
+        100% {
+            opacity: 1;
+            top: 0;
+        }
+    }
+    @keyframes slide-down {
+        0% {
+            display: block;
+            opacity: 0;
+            top: -352px;
+        }
+        50% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+            top: 110px;
+            display: block;
+        }
+    }
+    .menu-active {
+        border-bottom: 5px solid @primary-color;
+    }
+    .menu-mobile-active {
+        display: block !important;
+    }
+    .show {
+        display: block !important;
+    }
+    .search-active {
+        color: #0041bd;
+    }
+    .mask {
+        position: fixed;
+        top: 72px;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.4);
+    }
+    .nav-fill {
+        height: 110px;
+        @media (max-width: 1000px) {
+            height: 70px;
+        }
+        .nav-wrapper {
+            background-color: #fff;
+            animation: fade-in;
+            animation-duration: 0.5s;
+            height: 110px;
+            width: 100%;
+            position: fixed;
+            z-index: 999;
+            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
+            @media (max-width: 1000px) {
+                height: 70px;
+            }
+            .nav-bar {
+                width: 1200px;
+                height: 100%;
+                margin: 0 auto;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                @media (max-width: 1000px) {
+                    width: 100%;
+                    padding: 0 15px;
+                }
+                ul li {
+                    display: inline-block;
+                }
+                .nav-logo {
+                    flex-shrink: 0;
+                    width: 193px;
+                    margin-right: 25px;
+                    cursor: pointer;
+                }
+                .nav-logo-mobile {
+                    display: none;
+                    width: 142px;
+                }
+                .nav-other-mobile {
+                    display: none;
+                    height: 100%;
+                    .menu-icon-active {
+                        color: #0041bd;
+                    }
+                    li {
+                        height: 100%;
+                        line-height: 70px;
+                        vertical-align: middle;
+                        margin-left: 20px;
+                        cursor: pointer;
+                    }
+                    .lang {
+                        font-size: 16px;
+                    }
+                    .search {
+                        font-size: 25px;
+                    }
+                    .menu {
+                        font-size: 22px;
+                    }
+                }
+                .nav-menu-mobile {
+                    display: none;
+                    max-height: calc(100vh - 70px);
+                    overflow-y: scroll;
+                    background-color: #fff;
+                    position: fixed;
+                    top: 70px;
+                    left: 0;
+                    width: 100%;
+                    padding: 10px 30px;
+                    z-index: 998;
+                    & > li {
+                        display: block;
+                        border-bottom: 1px solid rgba(0, 0, 0, 0.09);
+                        padding: 10px 0;
+                        a {
+                            border: none;
+                            font-size: 16px;
+                            font-family: FZLTHJW;
+                            height: 26px;
+                            line-height: 26px;
+                            display: inline-block;
+                            width: 100%;
+                            position: relative;
+                            .arrow-active {
+                                color: #0041bd;
+                                transform: rotate(90deg);
+                            }
+                            i {
+                                position: absolute;
+                                right: 7px;
+                                top: 5px;
+                            }
+                        }
+                        .sub-menu {
+                            margin-left: 15px;
+                            display: none;
+                            .sub-menu-color-active {
+                                color: #0041bd;
+                            }
+                            li {
+                                display: block;
+                                height: 26px;
+                                line-height: 26px;
+                                font-size: 14px;
+                                font-family: FZLTXIHJW;
+                                color: rgba(0, 0, 0, 0.7);
+                                margin: 6px 0;
+                            }
+                        }
+                    }
+                }
+                .nav-menu {
+                    height: 100%;
+                    flex: 3;
+                    .ff-h();
+                    color: @text-dark;
+                    .fz20();
+                    display: flex;
+                    align-items: center;
+                    @media (max-width: 1000px) {
+                        display: none;
+                    }
+                    .show-sub-menu {
+                        .sub-menu {
+                            animation: slide-down;
+                            animation-duration: 0.5s;
+                            top: 110px;
+                            display: block;
+                        }
+                    }
+                    .sub-menu {
+                        background-color: #fff;
+                        position: absolute;
+                        left: -100%;
+                        height: 242px;
+                        width: 364px;
+                        display: none;
+                        border: 1px solid @primary-color;
+                        box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.1);
+                        border-radius: 5px;
+                        .sub-menu-wrapper {
+                            height: 100%;
+                            display: flex;
+
+                            .sub-menu-left {
+                                display: flex;
+                                flex-direction: column;
+                                align-items: center;
+                                flex: 3;
+                                background-color: rgba(0, 0, 0, 0.05);
+                                height: 100%;
+                                &:hover {
+                                    cursor: pointer;
+                                    color: @primary-color2;
+                                }
+                                .sub-menu-img {
+                                    width: 100%;
+                                    flex: 3;
+                                }
+                                .sub-menu-name {
+                                    text-align: center;
+                                    flex: 1;
+                                }
+                            }
+                            .sub-menu-right {
+                                display: inline-block;
+                                flex: 2;
+                            }
+                            .community-sub-menu {
+                                display: flex;
+                                flex-direction: column;
+                                align-items: center;
+                                justify-content: space-around;
+                                li {
+                                    line-height: 20px;
+                                    &:hover {
+                                        cursor: pointer;
+                                        color: @primary-color2;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                    .sig-menu {
+                        width: 572px;
+                        .sub-menu-left {
+                            flex: 2 !important;
+                        }
+                        .sig-sub-menu {
+                            padding-left: 30px;
+                            flex: 3 !important;
+                            .sub-menu-head {
+                                height: 60px;
+                                line-height: 60px;
+                                a {
+                                    margin-left: 10px;
+                                    &:hover {
+                                        cursor: pointer;
+                                        color: @primary-color;
+                                    }
+                                }
+                            }
+                            .sig-menu-content {
+                                height: 182px;
+                                display: flex;
+                                flex-direction: column;
+                                align-items: flex-start;
+                                justify-content: flex-start;
+                                flex-wrap: wrap;
+                                li {
+                                    line-height: 20px;
+                                    margin-bottom: 15px;
+                                    &:hover {
+                                        cursor: pointer;
+                                        color: @primary-color;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                    & > li {
+                        position: relative;
+                        padding: 0 25px;
+                        height: 100%;
+                        line-height: 110px;
+                        @media (max-width: 1000px) {
+                            line-height: 70px;
+                        }
+                        & > a {
+                            display: inline-block;
+                            height: 100%;
+                            cursor: pointer;
+                            &:hover {
+                                border-bottom: 5px solid @primary-color;
+                            }
+                        }
+                    }
+                }
+                .nav-other {
+                    flex: 1;
+                    height: 100%;
+                    .fz16();
+                    color: @text-dark;
+                    .ff-xih();
+                    display: flex;
+                    justify-content: flex-end;
+                    @media (max-width: 1000px) {
+                        display: none;
+                    }
+                    li {
+                        margin-left: 36px;
+                        cursor: pointer;
+                        display: flex;
+                        flex-direction: column;
+                        align-items: center;
+                        justify-content: center;
+                        span {
+                            margin-top: 10px;
+                        }
+                    }
+                }
+                .search-mobile {
+                    display: none;
+                    text-align: center;
+                    position: fixed;
+                    top: 70px;
+                    left: 0;
+                    width: 100%;
+                    background-color: #fff;
+                }
+                @media (max-width: 1000px) {
+                    .nav-logo {
+                        display: none;
+                    }
+                    .nav-logo-mobile {
+                        display: inline-block;
+                    }
+                    .nav-other-mobile {
+                        display: inline-block;
+                    }
+                }
+            }
+        }
+    }
+</style>
diff --git a/packageship/web-ui/src/config/index.js b/packageship/web-ui/src/config/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..c6f69416206a377add74ddbf175931f1e6d35c7e
--- /dev/null
+++ b/packageship/web-ui/src/config/index.js
@@ -0,0 +1,7 @@
+/**
+ * @file  站点基础配置文件
+ * */
+
+export default {
+    serviceBaseUrl: '/api',
+};
\ No newline at end of file
diff --git a/packageship/web-ui/src/lang/cn.js b/packageship/web-ui/src/lang/cn.js
new file mode 100644
index 0000000000000000000000000000000000000000..e8003d7380560135601bf1d2821ae90782655424
--- /dev/null
+++ b/packageship/web-ui/src/lang/cn.js
@@ -0,0 +1,8 @@
+/**
+ * @file  国际化中文配置主入口
+ * */
+
+module.exports = {
+    common: require('@/lang/lang-modules/common').cn,
+    home: require('@/lang/lang-modules/home').cn,
+};
\ No newline at end of file
diff --git a/packageship/web-ui/src/lang/en.js b/packageship/web-ui/src/lang/en.js
new file mode 100644
index 0000000000000000000000000000000000000000..9dfea9098077ffd357297cc26dac49dd0619fd23
--- /dev/null
+++ b/packageship/web-ui/src/lang/en.js
@@ -0,0 +1,8 @@
+/**
+ * @file  国际化英文配置主入口
+ * */
+
+module.exports = {
+    common: require('@/lang/lang-modules/common').en,
+    home: require('@/lang/lang-modules/home').en,
+};
\ No newline at end of file
diff --git a/packageship/web-ui/src/lang/lang-modules/common.js b/packageship/web-ui/src/lang/lang-modules/common.js
new file mode 100644
index 0000000000000000000000000000000000000000..880c88b23ec2e6ff5659a2e89fe1e0e8ce4bfb12
--- /dev/null
+++ b/packageship/web-ui/src/lang/lang-modules/common.js
@@ -0,0 +1,233 @@
+/**
+ * @file  公共模块国际化配置入口
+ * */
+
+module.exports = {
+    cn: {
+        searchPlaceholder: '输入内容',
+        navRouterConfig: [{
+            path: '/download',
+            name: '下载',
+            children: [],
+            class: []
+        },
+            {
+                path: '/documentation/documentation',
+                name: '文档',
+                children: [],
+                class: []
+            },
+            {
+                path: '',
+                name: '社区',
+                subName: '社区玩转指引',
+                subPath: '/community/community-guidance',
+                subImg: '',
+                children: [{
+                    name: '活动',
+                    path: '/community/event-list'
+                },
+                    {
+                        name: '博客',
+                        path: '/community/blog-list'
+                    },
+                    {
+                        name: '新闻',
+                        path: '/community/news-list'
+                    },
+                    {
+                        name: '活动',
+                        path: '/community/mailing-list'
+                    }
+                ],
+                class: []
+            },
+            {
+                path: '',
+                name: 'SIG',
+                subName: 'SIG玩转指引',
+                subPath: '/sig/sig-guidance',
+                subImg: '',
+                viewAllName: '查看全部',
+                viewAllPath: '/sig/sig-list',
+                children: [{
+                    name: 'A-Tune',
+                    path: '/sig/sig-detail/1'
+                },
+                    {
+                        name: 'Base-service',
+                        path: '/sig/sig-detail/2'
+                    },
+                    {
+                        name: 'Computing',
+                        path: '/sig/sig-detail/3'
+                    },
+                    {
+                        name: 'DB',
+                        path: '/sig/sig-detail/4'
+                    },
+                    {
+                        name: 'GNOME',
+                        path: '/sig/sig-detail/5'
+                    },
+                    {
+                        name: 'Application',
+                        path: '/sig/sig-detail/6'
+                    },
+                    {
+                        name: 'Compiler',
+                        path: '/sig/sig-detail/7'
+                    },
+                    {
+                        name: 'Container',
+                        path: '/sig/sig-detail/8'
+                    },
+                    {
+                        name: 'Desktop',
+                        path: '/sig/sig-detail/9'
+                    },
+                    {
+                        name: 'Infrastructure',
+                        path: '/sig/sig-detail/10'
+                    }
+                ],
+                class: []
+            },
+            {
+                path: '/authentication',
+                name: '认证',
+                children: [],
+                class: []
+            },
+            {
+                path: '/security',
+                name: '安全',
+                children: [],
+                class: []
+            }
+        ],
+        PAGE_NAME: 'Package Management',
+        lang: 'EN',
+        search: '搜索',
+        gitee: '码云',
+        footer: {
+            leftLogo: 'openEuler',
+            mail: 'contact@openeuler.org',
+            copyright: '版权所有 © 2020 openeuler 保留一切权利',
+            rightList: ['品牌', '法律声明', '隐私政策']
+        }
+    },
+    en: {
+        searchPlaceholder: 'Input content',
+        navRouterConfig: [{
+            path: '/download',
+            name: 'Download',
+            children: [],
+            class: []
+        },
+            {
+                path: '/documentation/documentation',
+                name: 'Documentation',
+                children: [],
+                class: []
+            },
+            {
+                path: '',
+                name: 'Community',
+                subName: '社区玩转指引',
+                subPath: '/community/community-guidance',
+                subImg: '',
+                children: [{
+                    name: 'Events',
+                    path: '/community/event-list'
+                },
+                    {
+                        name: 'Blog',
+                        path: '/community/blog-list'
+                    },
+                    {
+                        name: 'News',
+                        path: '/community/news-list'
+                    },
+                    {
+                        name: 'Mailing',
+                        path: '/community/mailing-list'
+                    }
+                ],
+                class: []
+            },
+            {
+                path: '',
+                name: 'SIG',
+                subName: 'SIG Play guide',
+                subPath: '/sig/sig-guidance',
+                subImg: '',
+                viewAllName: 'View All',
+                viewAllPath: '/sig/sig-list',
+                children: [{
+                    name: 'A-Tune',
+                    path: '/sig/sig-detail/1'
+                },
+                    {
+                        name: 'Base-service',
+                        path: '/sig/sig-detail/2'
+                    },
+                    {
+                        name: 'Computing',
+                        path: '/sig/sig-detail/3'
+                    },
+                    {
+                        name: 'DB',
+                        path: '/sig/sig-detail/4'
+                    },
+                    {
+                        name: 'GNOME',
+                        path: '/sig/sig-detail/5'
+                    },
+                    {
+                        name: 'Application',
+                        path: '/sig/sig-detail/6'
+                    },
+                    {
+                        name: 'Compiler',
+                        path: '/sig/sig-detail/7'
+                    },
+                    {
+                        name: 'Container',
+                        path: '/sig/sig-detail/8'
+                    },
+                    {
+                        name: 'Desktop',
+                        path: '/sig/sig-detail/9'
+                    },
+                    {
+                        name: 'Infrastructure',
+                        path: '/sig/sig-detail/10'
+                    }
+                ],
+                class: []
+            },
+            {
+                path: '/authentication',
+                name: 'Authentication',
+                children: [],
+                class: []
+            },
+            {
+                path: '/security',
+                name: 'Security',
+                children: [],
+                class: []
+            }
+        ],
+        PAGE_NAME: 'Package Management',
+        lang: '中',
+        search: 'search',
+        gitee: 'gitee',
+        footer: {
+            mail: 'contact@openeuler.org',
+            copyright: 'Copyright © 2020 openEuler. All rights reserved.',
+            rightList: ['TradeMark', 'Legal', 'Privacy']
+        }
+    }
+};
\ No newline at end of file
diff --git a/packageship/web-ui/src/lang/lang-modules/home.js b/packageship/web-ui/src/lang/lang-modules/home.js
new file mode 100644
index 0000000000000000000000000000000000000000..ae9f3a357bffffeb5cea3bf51372f584fd518599
--- /dev/null
+++ b/packageship/web-ui/src/lang/lang-modules/home.js
@@ -0,0 +1,88 @@
+/**
+ * @file  首页模块国际化配置入口
+ * */
+
+module.exports = {
+    cn: {
+        MANAGEMENT: '包管理',
+        PACKAGE_INF0: 'Package Info',
+        ISSUE_LIST: 'Issue List',
+        PKG_VERSION: '版本号',
+        SEARCH: '搜索',
+        BTN_DISPLAY: 'Custom Display Column',
+        BTN_EXCEL: '导出表格',
+        BTN_OK: '确认',
+        BTN_CLEAR: '取消',
+        TABLE_LABEL: {
+            NAME: 'Name',
+            MAINTAINER: 'Maintainer',
+            MAIN_LEVEL: 'Maintenance Level'
+        },
+        MOBILE_VERSION: 'Product Version',
+        MOBILE_SEARCH: 'Search Name',
+        PKG_TABLE: {
+            VERSION: 'Version：',
+            RELEASE: 'Release：',
+            URL: 'URL：',
+            LICENSE: 'License：',
+            FEATURE: 'Feature：',
+            MAINTAINER: 'Maintainer：',
+            MAINTIAN_LEVEL: 'Maintainlevel：',
+            REPO_URL: 'Repo URL：',
+            SUMMARY: 'Summary：',
+            DESCRIPTION: 'Description：',
+            SUBPACK: 'Subpack：',
+            REQUIRED: 'Required：',
+            ISSUE_NUM: 'Issue Num：'
+        },
+        ISSUE_TABLE: {
+            ISSUE_ID: 'Issue ID',
+            PACKAGE_NAME: 'Package Name',
+            ISSUE_TITLE: 'Issue Title',
+            ISSUE_TYPE: 'Issue Type',
+            ISSUE_STATUS: 'Issue Status',
+            MAINTAINER: 'Maintainer',
+        }
+    },
+    en: {
+        MANAGEMENT: 'Package Management',
+        PACKAGE_INF0: 'Package Info',
+        ISSUE_LIST: 'Issue List',
+        PKG_VERSION: 'Product Version',
+        SEARCH: 'Search',
+        BTN_DISPLAY: 'Custom Display Column',
+        BTN_EXCEL: 'Export Excel',
+        BTN_OK: 'OK',
+        BTN_CLEAR: 'Clear',
+        TABLE_LABEL: {
+            NAME: 'Name',
+            MAINTAINER: 'Maintainer',
+            MAIN_LEVEL: 'Maintenance Level'
+        },
+        MOBILE_VERSION: 'Product Version',
+        MOBILE_SEARCH: 'Search',
+        PKG_TABLE: {
+            VERSION: 'Version：',
+            RELEASE: 'Release：',
+            URL: 'URL：',
+            LICENSE: 'License：',
+            FEATURE: 'Feature：',
+            MAINTAINER: 'Maintainer：',
+            MAINTIAN_LEVEL: 'Maintainlevel：',
+            REPO_URL: 'Repo URL：',
+            SUMMARY: 'Summary：',
+            DESCRIPTION: 'Description：',
+            SUBPACK: 'Subpack：',
+            REQUIRED: 'Required：',
+            ISSUE_NUM: 'Issue Num：'
+        },
+        ISSUE_TABLE: {
+            ISSUE_ID: 'Issue ID',
+            PACKAGE_NAME: 'Package Name',
+            ISSUE_TITLE: 'Issue Title',
+            ISSUE_TYPE: 'Issue Type',
+            ISSUE_STATUS: 'Issue Status',
+            MAINTAINER: 'Maintainer',
+        }
+    }
+};
\ No newline at end of file
diff --git a/packageship/web-ui/src/libs/ajax-utils.js b/packageship/web-ui/src/libs/ajax-utils.js
new file mode 100644
index 0000000000000000000000000000000000000000..5624cef4009f8bbc91f5b9dad5168f606866df3c
--- /dev/null
+++ b/packageship/web-ui/src/libs/ajax-utils.js
@@ -0,0 +1,43 @@
+/**
+ * @file  axios工具类
+ * */
+
+import axios from 'axios';
+import config from '@/config';
+import Vue from 'vue';
+
+let postJson = params => {
+    let api = axios.create({
+        baseURL: config.serviceBaseUrl || ''
+    });
+    api.defaults.headers.post['Content-Type'] = 'application/json';
+
+    // 请求数据
+    let dataStr = params['data'] && ((typeof (params['data']) === 'object')
+    ? JSON.stringify(params['data']) : params['data']);
+
+    let ajaxParams = {};
+    // success方法重载
+    ajaxParams['success'] = function (d) {
+        const data = typeof d.data == 'string' ? JSON.parse(d.data) : d.data;
+        if (data) {
+            params.success(data);
+        } else {
+            new Vue().$message.error('开小差~请稍后重试。');
+        }
+    };
+
+    return api({
+        method: params['type'] || 'post',
+        url: params['url'],
+        data: dataStr,
+        params: params['params'],
+        responseType: 'json'
+    }).then(ajaxParams['success']).catch(params['error']);
+};
+
+let exportsMethods = {
+    postJson: params => postJson(params)
+};
+
+export default exportsMethods;
\ No newline at end of file
diff --git a/packageship/web-ui/src/main.js b/packageship/web-ui/src/main.js
new file mode 100644
index 0000000000000000000000000000000000000000..71ab022755b178a4f8589171d391814f789d6799
--- /dev/null
+++ b/packageship/web-ui/src/main.js
@@ -0,0 +1,40 @@
+/**
+ * @file  vue组件主入口
+ * */
+
+import Vue from 'vue';
+import App from './App.vue';
+import router from './router';
+import ElementUI from 'element-ui';
+import locale from 'element-ui/lib/locale/lang/en';
+import Vue18n from 'vue-i18n';
+import '@/assets/style/base.css';
+import  echarts from 'echarts';
+
+
+if (!localStorage.getItem('locale') || localStorage.getItem('locale') === 'zh-en') {
+    import('@/assets/style/font-en.css');
+} else {
+    import('@/assets/style/font-cn.css');
+}
+
+Vue.use(Vue18n);
+Vue.use(ElementUI, {locale});
+Vue.use(echarts)
+Vue.prototype.$echarts = echarts
+
+const i18n = new Vue18n({
+    locale: localStorage.getItem('locale') || 'zh-en',
+    messages: {
+        'zh-cn': require('@/lang/cn'), // 中文语言包
+        'zh-en': require('@/lang/en') // 英文语言包
+    }
+});
+
+Vue.config.productionTip = false;
+
+new Vue({
+    i18n,
+    router,
+    render: h => h(App)
+}).$mount('#app');
\ No newline at end of file
diff --git a/packageship/web-ui/src/router/index.js b/packageship/web-ui/src/router/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..85733588c29278b300e3b489a9999c641d3585b1
--- /dev/null
+++ b/packageship/web-ui/src/router/index.js
@@ -0,0 +1,26 @@
+/**
+ * @file  路由配置入口文件
+ * */
+
+import Vue from 'vue';
+import Router from 'vue-router';
+import routes from './routers';
+
+Vue.use(Router);
+
+const router = new Router({
+    routes,
+    mode: 'history'
+});
+
+const originalPush = Router.prototype.push;
+
+Router.prototype.push = function push(location) {
+    return originalPush.call(this, location).catch(err => err);
+}
+
+router.beforeEach((to, from, next) => {
+    next();
+});
+
+export default router;
\ No newline at end of file
diff --git a/packageship/web-ui/src/router/routers.js b/packageship/web-ui/src/router/routers.js
new file mode 100644
index 0000000000000000000000000000000000000000..ddaef75d87487ef48386f00cca59f9ac770f8120
--- /dev/null
+++ b/packageship/web-ui/src/router/routers.js
@@ -0,0 +1,17 @@
+/**
+ * @file  路由配置文件
+ * */
+
+export default [{
+        path: '/',
+        component: () => import('@/views/home/home.vue')
+    },
+    {
+        path: '/package-detail',
+        component: () => import('@/views/package/package-detail.vue')
+    },
+    {
+        path: '*',
+        component: () => import('@/views/404.vue')
+    }
+];
\ No newline at end of file
diff --git a/packageship/web-ui/src/views/404.vue b/packageship/web-ui/src/views/404.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4c4f2f480288f33226b32e0353c7c2ac0270665f
--- /dev/null
+++ b/packageship/web-ui/src/views/404.vue
@@ -0,0 +1,11 @@
+<template>
+    <div class="home">
+        404 no found!
+    </div>
+</template>
+
+<script>
+export default {
+    mounted() {}
+};
+</script>
diff --git a/packageship/web-ui/src/views/home/depend-info.vue b/packageship/web-ui/src/views/home/depend-info.vue
new file mode 100644
index 0000000000000000000000000000000000000000..119fc428008a739ec4e531d839145eb500b6d14e
--- /dev/null
+++ b/packageship/web-ui/src/views/home/depend-info.vue
@@ -0,0 +1,111 @@
+<template>
+    <div class="depend">
+        <div class="depend-type">
+            <span>Type</span>
+            <div class="type-btns">
+                <button :class="{'active': currentButton === 'Install'}" @click="clickButton($event)">Install Depend</button>
+                <button :class="{'active': currentButton === 'Build'}" @click="clickButton($event)">Build Depend</button>
+                <button :class="{'active': currentButton === 'Self'}" @click="clickButton($event)">Self Build Depend</button>
+                <button :class="{'active': currentButton === 'Bedepend'}" @click="clickButton($event)">Bedepend</button>
+            </div>
+       </div>
+        <div class="depend-search">
+            <el-form
+                    :inline="true"
+                    class="form">
+                <el-form-item label="Search">
+                    <el-input
+                            v-model="formData.queryPkgName"
+                            class="pc-search"
+                            placeholder="Search">
+                        <i slot="suffix" class="icon-search"></i>
+                    </el-input>
+                    <el-input
+                            v-model="formData.queryPkgName"
+                            class="mobile-search"
+                            placeholder="Search">
+                        <i slot="suffix" class="icon-search"></i>
+                    </el-input>
+                </el-form-item>
+                <el-form-item label="Product Version">
+                    <el-select class="pc-select" v-model="formData.tableName" @change="initData(1)">
+                        <el-option v-for="(item, index) in productV" :key="index"
+                                   :label="item"
+                                   :value="item">
+                        </el-option>
+                    </el-select>
+                    <el-select class="mobile-select" v-model="formData.tableName" @change="initData(1)" placeholder="Product Version">
+                        <el-option v-for="(item, index) in productV" :key="index"
+                                   :label="item"
+                                   :value="item">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+            </el-form>
+        </div>
+        <div class="depend-diagram">
+            <div id="package-diagram"></div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "depend-info",
+        data () {
+            return {
+                formData: {
+                    queryPkgName: "",
+                    tableName: ""
+                },
+                productV: [],
+                currentButton: 'Install'
+            }
+        },
+        mounted() {
+            this.drawLine()
+        },
+        methods: {
+            initData() {
+
+            },
+            clickButton(event) {
+                let text = event.currentTarget.innerHTML
+                text = text.split(' ', 1)[0]
+                this.currentButton = text
+            },
+            drawLine() {
+
+            }
+        }
+    }
+</script>
+
+<style scoped>
+.type-btns {
+    display: inline-block;
+}
+.pc-search,
+.pc-select {
+    display: block;
+}
+.mobile-search,
+.mobile-select {
+    display: none;
+}
+#package-diagram {
+    width: 600px;
+    height: 600px;
+}
+@media screen and (max-width: 1000px) {
+    .pc-search,
+    .pc-select {
+        display: none;
+    }
+    .mobile-search,
+    .mobile-select {
+        display: block;
+        width: 315px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/packageship/web-ui/src/views/home/home.vue b/packageship/web-ui/src/views/home/home.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fa2dde52d8af58da20a55aa4027c7fd7e82bf317
--- /dev/null
+++ b/packageship/web-ui/src/views/home/home.vue
@@ -0,0 +1,105 @@
+<template>
+    <div class="home">
+        <h1>Package Management</h1>
+
+        <div class="switcher">
+            <a :class="{'active': isInfoShow }" @click="showInfo">Package Info</a>
+            <a :class="{'active': isListShow }" @click="showList">Issue List</a>
+            <a :class="{'active': isDependShow }" @click="showDepend">Depend Info</a>
+        </div>
+        <div class="package-container">
+            <package-Info v-if="isInfoShow" />
+            <issue-list v-if="isListShow" />
+            <depend-info v-if="isDependShow" />
+        </div>
+    </div>
+</template>
+
+<script>
+import InfoList from "./package-info";
+import IssueList from "./issue-list"
+import DependInfo from "./depend-info"
+
+export default {
+    name: "Home",
+    components: {
+        "package-Info": InfoList,
+        "issue-list": IssueList,
+        "depend-info": DependInfo
+    },
+    mounted() {
+    },
+    data() {
+        return {
+            isInfoShow: true,
+            isListShow: false,
+            isDependShow: false
+        }
+    },
+    methods: {
+        showInfo() {
+            this.isInfoShow = true;
+            this.isListShow = false;
+            this.isDependShow = false
+
+        },
+        showList() {
+            this.isListShow = true;
+            this.isInfoShow = false;
+            this.isDependShow = false
+        },
+        showDepend() {
+            this.isInfoShow = false;
+            this.isListShow = false;
+            this.isDependShow = true
+        }
+
+    }
+};
+</script>
+
+<style lang="less">
+
+</style>
+
+<style scoped>
+    h1 {
+        font-size: 36px;
+        font-family: HuaweiSans-Medium;
+        margin: 60px 0;
+    }
+    .home {
+        width: 1200px;
+        margin: 0 auto;
+    }
+    .switcher a {
+        font-size: 24px;
+        font-family: HuaweiSans-Medium;
+        color: rgba(0, 0, 0, 0.5);
+        margin-right: 40px;
+        cursor: pointer;
+        padding-bottom: 10px;
+        margin-bottom: 30px;
+    }
+    .switcher .active {
+        color: #000;
+        display: inline-block;
+        border-bottom: 4px solid #002fa7;
+
+    }
+    @media screen and (max-width: 1000px) {
+        .home {
+            width: 100%;
+            padding: 0 30px;
+        }
+        h1 {
+            font-size: 18px;
+            font-family: FZLTCHJW;
+            margin: 40px 0;
+        }
+        .switcher a {
+            font-size: 16px;
+            margin-right: 20px;
+        }
+    }
+</style>
diff --git a/packageship/web-ui/src/views/home/issue-list.vue b/packageship/web-ui/src/views/home/issue-list.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9768781273525c86ee00fdcc40134ca46edad633
--- /dev/null
+++ b/packageship/web-ui/src/views/home/issue-list.vue
@@ -0,0 +1,284 @@
+<template>
+    <div class="issue-list">
+        <el-form
+            :inline="true"
+            class="form">
+            <a class="form-button" href="https://api.openeuler.org/pkgmanagedebug/lifeCycle/download/issues">
+                <img src="@/assets/images/dowmload.svg" alt="">
+                Export Excel
+            </a>
+        </el-form>
+        <el-table
+            class="pc-pkg-table"
+            ref="filterTable"
+            :data="issueData"
+            stripe
+            @filter-change="filterChange">
+            <el-table-column
+                prop="issue_id"
+                label="Issue ID"
+                width="120">
+                <template slot-scope="scope">
+                    <a :href="scope.row.issue_url" target="_blank">{{ scope.row.issue_id }}</a>
+                </template>
+            </el-table-column>
+            <el-table-column
+                prop="pkg_name"
+                label="Package Name"
+             width="140">
+            </el-table-column>
+            <el-table-column
+                prop="issue_title"
+                label="Issue Title"
+                width="420">
+            </el-table-column>
+            <el-table-column
+                    prop="issue_type"
+                    label="Issue Type"
+                    column-key="issue_type"
+                    :filters="filterData(issueType)"
+                    filter-placement="bottom-end">
+                <template slot-scope="scope">
+                    <span>{{ scope.row.issue_type }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column
+                    prop="issue_status"
+                    label="Issue Status"
+                    column-key="issue_status"
+                    :filters="filterData(issueStatus)">
+                <template slot-scope="scope">
+                    <span>{{ scope.row.issue_status }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column
+                    prop="maintainer"
+                    label="Maintainer">
+                <template slot-scope="scope">
+                    <span>{{ scope.row.maintainer }}</span>
+                </template>
+            </el-table-column>
+        </el-table>
+        <div class="mobile-pkg-table" v-for="(item, index) in issueData" :key="index">
+            <ul class="pkg-line">
+                <li class="detail-title">Issue ID：</li>
+                <li class="detail-notice">{{ item.issue_id }}</li>
+            </ul>
+            <ul class="pkg-line">
+                <li class="detail-title">Package Name：</li>
+                <li>{{ item.pkg_name }}</li>
+            </ul>
+            <ul class="pkg-line">
+                <li class="detail-title">Issue Title： </li>
+                <li>{{ item.issue_title }}</li>
+            </ul>
+            <ul class="pkg-line">
+                <li class="detail-title">Issue Type：</li>
+                <li>{{ item.issue_type }}</li>
+            </ul>
+            <ul class="pkg-line">
+                <li class="detail-title">Issue Status：</li>
+                <li>{{ item.issue_status }}</li>
+            </ul>
+            <ul class="pkg-line">
+                <li class="detail-title">Maintainer：</li>
+                <li>{{ item.maintainer }}</li>
+            </ul>
+        </div>
+
+
+        <el-pagination
+                class="safety-bulletin-pagination"
+                :current-page.sync="formData.pageNum"
+                :page-size="formData.pageSize"
+                layout="total, prev, pager, next, jumper"
+                @current-change="initData"
+                :total="total">
+        </el-pagination>
+        <el-pagination
+                class="mobile-safety-bulletin-pagination"
+                :current-page.sync="formData.pageNum"
+                :page-size="formData.pageSize"
+                layout="prev, pager, next"
+                @current-change="initData"
+                :total="total">
+        </el-pagination>
+    </div>
+</template>
+
+<script>
+    import { issueList, issueType, issueStatus } from "../../api/issue";
+    export default {
+        name: "issue-list",
+        data() {
+            return {
+                formData: {
+                    pageNum: 1,
+                    pageSize: 10,
+                    issueType: '',
+                    issueStatus: ''
+                },
+                total: 0,
+                value: {
+                    issueType: '',
+                    issueStatus: ''
+                },
+                issueData: [],
+                issueType: [],
+                issueStatus: [],
+            }
+        },
+        mounted() {
+            this.getData(issueType, 'issueType');
+            this.getData(issueStatus, 'issueStatus');
+        },
+        created() {
+            this.initData(1, this.value);
+        },
+        methods: {
+            getTablePage (flag, value) {
+                this.formData.pageNum = flag;
+                this.formData.issueType = value.issueType;
+                this.formData.issueStatus = value.issueStatus;
+                issueList(this.formData)
+                    .then(response => {
+                        if (response.total_count){
+                            this.total = response.total_count;
+                            this.issueData = response.data;
+                        } else {
+                            this.total = 0;
+                            this.issueData = [];
+                        }
+                    })
+                    .catch(data => {
+                        this.$message.error(data);
+                    });
+            },
+            initData(flag, value) {
+                this.getTablePage(flag, value);
+            },
+            filterData(array) {
+                let datas = [];
+                array.forEach((item) => {
+                    let o = {};
+                    o.text = item;
+                    o.value = item;
+                    datas.push(o);
+                })
+                return datas;
+            },
+            filterChange (filterObj) {
+                let value = {
+                    issueStatus: '',
+                    issueType: ''
+                }
+                if (filterObj.issue_type === undefined) {
+                    value.issueStatus = filterObj.issue_status[0];
+                } else {
+                    value.issueType = filterObj.issue_type[0];
+                }
+                this.initData(1, value);
+            },
+            getData(func, verb) {
+                func()
+                    .then(response => {
+                        this[verb] = response.data;
+                    })
+                    .catch(response => {
+                        this.$message.error(response);
+                    });
+            },
+        },
+    }
+</script>
+
+<style scoped>
+    .el-table__row .cell a {
+        color: #002fa7;
+        text-decoration: none;
+        cursor: pointer;
+    }
+    .safety-bulletin-pagination {
+        display: block;
+        margin: 60px 0 200px 0;
+    }
+    .mobile-safety-bulletin-pagination {
+        display: none;
+    }
+    .form-button {
+        display: inline-block;
+        text-decoration: none;
+        color: #000;
+        height: 38px;
+        line-height: 38px;
+        border-radius: 4px;
+        border: 1px solid rgba(0, 0, 0, 0.5);
+        padding: 0 20px;
+        margin-right: 20px;
+        cursor: pointer;
+        margin-bottom: 30px;
+        float: right;
+    }
+    .form-button img {
+        width: 19px;
+        height: 15px;
+        vertical-align: middle;
+    }
+    .form {
+        display: block;
+    }
+    .pc-pkg-table {
+        width: 100%;
+        display: block;
+    }
+    .mobile-pkg-table {
+        display: none;
+    }
+    @media screen and (max-width: 1000px) {
+        .form {
+            display: none;
+        }
+        .pc-pkg-table {
+            display: none;
+        }
+        .mobile-pkg-table {
+            display: block;
+        }
+        .safety-bulletin-pagination {
+            display: none;
+        }
+        .mobile-safety-bulletin-pagination {
+            display: block;
+            margin: 40px 0 90px;
+        }
+        .mobile-pkg-table:nth-child(odd) {
+            background: rgba(0, 0, 0, 0.05);
+        }
+        .mobile-pkg-table {
+            padding: 20px;
+        }
+        .mobile-pkg-table:last-child {
+            padding-bottom: 0;
+        }
+        .pkg-line li {
+            display: inline;
+            font-size: 12px;
+            line-height: 16px;
+        }
+        .pkg-line {
+            margin-bottom: 10px;
+        }
+        .pkg-line li:first-child {
+            font-family: Roboto-Regular;
+            font-weight: 400;
+        }
+        .pkg-line li:last-child {
+            font-family: Roboto-Light;
+            font-weight: 300;
+            color: rgba(0, 0, 0, 0.5);
+        }
+        .mobile-pkg-table .pkg-line .detail-notice {
+            color: #002FA7;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/packageship/web-ui/src/views/home/package-info.vue b/packageship/web-ui/src/views/home/package-info.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0295e226abea0abdf4244a93d5cfacf24bbc8406
--- /dev/null
+++ b/packageship/web-ui/src/views/home/package-info.vue
@@ -0,0 +1,543 @@
+<template>
+    <div class="package-info">
+        <el-form
+                :inline="true"
+                class="form">
+            <div class="form-inputs">
+                <el-form-item label="Product Version">
+                    <el-select class="pc-select" v-model="formData.tableName" @change="initData(1, value)">
+                        <el-option v-for="(item, index) in productV" :key="index"
+                                   :label="item"
+                                   :value="item">
+                        </el-option>
+                    </el-select>
+                    <el-select class="mobile-select" v-model="formData.tableName" @change="initData(1, value)" placeholder="Product Version">
+                        <el-option v-for="(item, index) in productV" :key="index"
+                                   :label="item"
+                                   :value="item">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="Search">
+                    <el-input
+                            v-model="formData.queryPkgName"
+                            class="pc-search"
+                            placeholder="Search Name">
+                        <i slot="suffix" class="icon-search" @click="initData(1, value)"></i>
+                    </el-input>
+                    <el-input
+                            v-model="formData.queryPkgName"
+                            class="mobile-search"
+                            placeholder="Search Name">
+                        <i slot="suffix" class="icon-search" @click="initData(1, value)"></i>
+                    </el-input>
+                </el-form-item>
+            </div>
+            <div class="form-btns">
+                <a class="form-button" @click="centerDialogVisible = true">
+                    <img src="@/assets/images/column.svg" alt="">
+                    Custom Display Column
+                </a>
+                <a class="form-button" :href="excelUrl">
+                    <img src="@/assets/images/dowmload.svg" alt="">
+                    Export Excel
+                </a>
+            </div>
+        </el-form>
+        <el-dialog
+                title="Display Column"
+                class="column-button"
+                :visible.sync="centerDialogVisible"
+                width="80%"
+                center>
+            <div class="col-button">
+                <el-checkbox-group v-model="checked">
+                    <el-checkbox-button v-for="item in checkList" :label="item" :key="item">{{item}}</el-checkbox-button>
+                </el-checkbox-group>
+            </div>
+            <span slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="columnFilter">OK</el-button>
+                <el-button @click="centerDialogVisible = false">Clear</el-button>
+            </span>
+        </el-dialog>
+        <template>
+            <el-table
+                    class="pc-pkg-table"
+                    :data="tableData"
+                    stripe
+                    @filter-change="filterChange">
+                <template v-for="(item, index) in filterTable(tableTitle)">
+                    <el-table-column
+                            :key="index"
+                            v-if="item.label === 'Name'"
+                            :label="item.label"
+                            :prop="item.column_name">
+                        <template slot-scope="scope" >
+                            <a @click="go(scope.row.name, formData.tableName)">{{ scope.row.name }}</a>
+                        </template>
+                    </el-table-column>
+                    <el-table-column
+                        :key="index"
+                        v-if="item.label === 'Maintainer'"
+                        :label="item.label"
+                        :prop="item.column_name"
+                        :column-key="item.column_name"
+                        :filters="filterData(pkgMaintainer)"
+                        filter-placement="bottom-end">
+                        <template slot-scope="scope">
+                            <span>{{ scope.row.maintainer }}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column
+                            :key="index"
+                            v-if="item.label === 'Maintenance Level'"
+                            :label="item.label"
+                            :prop="item.column_name"
+                            :column-key="item.column_name"
+                            :filters="filterData(pkgMainLevel)"
+                            filter-placement="bottom-end">
+                        <template slot-scope="scope">
+                            <span>{{ scope.row.maintainlevel }}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column
+                        :key="index"
+                        v-if="(item.label !== 'Maintainer') && (item.label !== 'Name') && (item.label !== 'Maintenance Level')"
+                        :label="item.label"
+                        :prop="item.column_name">
+                    </el-table-column>
+                </template>
+            </el-table>
+            <div class="mobile-pkg-table" v-for="(item, index) in tableData" :key="index">
+                <ul class="pkg-line">
+                    <li class="detail-title">Name：</li>
+                    <li class="detail-notice"><a @click="go(item.name, formData.tableName)">{{ item.name }}</a></li>
+                </ul>
+                <ul class="pkg-line">
+                    <li class="detail-title">Version：</li>
+                    <li>{{ item.version }}</li>
+                </ul>
+                <ul class="pkg-line">
+                    <li class="detail-title">Release：</li>
+                    <li>{{ item.release }}</li>
+                </ul>
+                <ul class="pkg-line">
+                    <li class="detail-title">URL：</li>
+                    <li>{{ item.url }}</li>
+                </ul>
+                <ul class="pkg-line">
+                    <li class="detail-title">License：</li>
+                    <li>{{ item.rpm_license }}</li>
+                </ul>
+                <ul class="pkg-line">
+                    <li class="detail-title">Feature：</li>
+                    <li>{{ item.feature }}</li>
+                </ul>
+                <ul class="pkg-line">
+                    <li class="detail-title">Maintainer：</li>
+                    <li>{{ item.maintainer }}</li>
+                </ul>
+                <ul class="pkg-line">
+                    <li class="detail-title">Maintainlevel：</li>
+                    <li>{{ item.maintainlevel }}</li>
+                </ul>
+                <ul class="pkg-line">
+                    <li class="detail-title">Repo URL：</li>
+                    <li>{{ item.gitee_url }}</li>
+                </ul>
+                <ul class="pkg-line">
+                    <li class="detail-title">Summary：</li>
+                    <li>{{ item.summary }}</li>
+                </ul>
+                <ul class="pkg-line">
+                    <li class="detail-title">Description：</li>
+                    <li>{{ item.description }}</li>
+                </ul>
+                <ul class="pkg-line">
+                    <li class="detail-title">Subpack：</li>
+                    <li><span v-for="(item, index) in item.subpack" :key="index">{{ item.name }} </span></li>
+                </ul>
+                <ul class="pkg-line">
+                    <li class="detail-title">Required：</li>
+                    <li><span v-for="(item, index) in item.buildrequired" :key="index">{{ item }} </span></li>
+                </ul>
+                <ul class="pkg-line">
+                    <li class="detail-title">Issue Num：</li>
+                    <li class="detail-notice">{{ item.issue }}</li>
+                </ul>
+            </div>
+        </template>
+        <el-pagination
+                class="safety-bulletin-pagination"
+                :current-page.sync="formData.pageNum"
+                :page-size="formData.pageSize"
+                layout="total, prev, pager, next, jumper"
+                @current-change="initData"
+                :total="total">
+        </el-pagination>
+        <el-pagination
+                class="mobile-safety-bulletin-pagination"
+                :current-page.sync="formData.pageNum"
+                :page-size="formData.pageSize"
+                layout="prev, pager, next"
+                @current-change="initData"
+                :total="total">
+        </el-pagination>
+    </div>
+</template>
+
+<script>
+    import { productVersion } from "../../api/repo";
+    import { packages } from "../../api/repo";
+    import { maintainer } from "../../api/repo";
+    import { tableCol } from "../../api/repo";
+
+
+    export default {
+        name: "package-info",
+        data() {
+            return {
+                search: '',
+                showOtherTag: null,
+                centerDialogVisible: false,
+                checkList: ["Name", "Version", "Release", "Url", "License", "Feature", "Maintainer", "Maintenance Level", "Release Time", "Used time", "Maintain Status", "Latest Version", "Latest Version Release Time", "Issue"],
+                checked: [],
+                pkgMaintainer: [],
+                pkgMainLevel: ['1', '2', '3', '4'],
+                formData: {
+                    pageNum: 1,
+                    pageSize: 10,
+                    tableName: "bringInRely",
+                    queryPkgName: "",
+                    maintainner: '',
+                    maintainlevel:''
+                },
+                pkgName: "",
+                total: 0,
+                productV: [],
+                tableTitle: [],
+                tableData: [],
+                excelUrl: "",
+                value: {
+                    maintainner: "",
+                    maintainlevel: ""
+                }
+            }
+        },
+        mounted() {
+            this.getData(productVersion, 'productV');
+            this.getData(tableCol, "tableTitle");
+            this.getData(maintainer, "pkgMaintainer");
+        },
+        created () {
+            this.initData(1, this.value);
+        },
+        methods: {
+            filterTable(data) {
+                let newTableTitle = data.filter(item => item.default_selected);
+                return newTableTitle;
+            },
+            filterData(array) {
+                let datas = [];
+                array.forEach((item) => {
+                    let titleData = {};
+                    titleData.text = item;
+                    titleData.value = item;
+                    datas.push(titleData);
+                })
+                return datas;
+            },
+            filterChange (filterObj) {
+                let value = {
+                    maintainner: "",
+                    maintainlevel: ""
+                }
+                if (filterObj.maintainner === undefined) {
+                    value.maintainlevel = filterObj.maintainlevel[0];
+                } else {
+                    value.maintainner = filterObj.maintainner[0];
+                }
+                this.initData(1, value);
+            },
+            defaultColumn(data) {
+                let titles = data;
+                let columnTitleList = [
+                    'Name',
+                    'Version',
+                    'Release',
+                    'Maintainer',
+                    'Maintenance Level',
+                    'Release Time',
+                    'Maintainer Status',
+                    'Issue',
+                    'Used Time'
+                ];
+                titles.forEach(title => {
+                    let label = title.label;
+                    if (columnTitleList.includes(label)) {
+                        title.default_selected = true;
+                    }
+                })
+                return titles
+            },
+            columnFilter() {
+                this.centerDialogVisible = false;
+                let title = this.tableTitle;
+                title.forEach(item => item.default_selected = false);
+                for (let i = 0; i < this.checked.length; i++) {
+                    let item = this.checked[i];
+                    for (let j = 0; j < title.length; j++) {
+                        let n = title[j];
+                        if (item === n.label) {
+                            n.default_selected = true;
+                        }
+                    }
+                }
+                title = this.defaultColumn(title);
+                this.tableTitle = title;
+            },
+            getTablePage (flag, value) {
+                this.formData.pageNum = flag;
+                this.formData.maintainner = value.maintainner;
+                this.formData.maintainlevel = value.maintainlevel;
+                packages(this.formData)
+                    .then(response => {
+                        if(response.total_count){
+                            this.total = response.total_count;
+                            this.tableData = response.data;
+                            this.excelUrl = "https://api.openeuler.org/pkgmanagedebug/lifeCycle/download/packages?table_name=" + this.formData.tableName;
+                        } else {
+                            this.total = 0;
+                            this.tableData = [];
+                        }
+                    })
+                    .catch(response => {
+                        this.$message.error('error', response);
+                    });
+            },
+            initData(flag) {
+                this.getTablePage(flag, this.value);
+            },
+            go (pkg_name, table_name){
+                this.$router.push({
+                    path: '/package-detail',
+                    query: {pkg_name, table_name}
+                })
+            },
+            getData(func, verb) {
+                func()
+                    .then(response => {
+                        this[verb] = response.data;
+                    })
+                    .catch(response => {
+                        this.$message.error(response);
+                    });
+            },
+        }
+    }
+</script>
+
+<style lang="less">
+    .package-info .el-form-item:nth-child(2) {
+        margin-left: 50px;
+    }
+    .package-info .el-button+.el-button {
+        margin-left: 20px;
+    }
+    .column-button .el-checkbox-button__inner,
+    .column-button .el-checkbox-button:first-child .el-checkbox-button__inner,
+    .column-button .el-checkbox-button:last-child .el-checkbox-button__inner {
+        border: 1px solid;
+        padding: 8px 20px;
+        color: #000;
+        box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
+        border-radius: 16px;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+    }
+    .column-button .el-dialog__body {
+        text-align: center;
+    }
+    .column-button .el-checkbox-button {
+        display: inline-block;
+        margin: 30px 20px 0;
+    }
+    .package-container label {
+        font-size: 18px;
+        font-family: Roboto-Regular,Roboto;
+        font-weight: 400;
+        color: #000;
+        line-height: 40px;
+    }
+    .package-container .el-input__inner {
+        line-height: 40px;
+        border: 1px solid rgba(0, 0, 0, 0.5);
+    }
+    .package-container .el-input__inner:hover {
+        border: 1px solid #002FA7;
+    }
+    .package-container .el-select:hover .el-input__inner {
+        border: 1px solid #002FA7;
+    }
+    .package-container .el-table th, .has-gutter tr {
+        background: rgba(0, 0, 0, 0.05);
+    }
+    .package-container .has-gutter th>.cell {
+        color: #000;
+        font-size: 16px;
+        font-family: Roboto-Regular,Roboto;
+        font-weight: 400;
+        word-break: normal;
+    }
+    .package-container .el-table .cell {
+        font-size: 14px;
+        font-family: Roboto-Light,Roboto;
+        font-weight: 300;
+        color: rgba(0,0,0,0.85);
+    }
+    .package-container .el-table td {
+        border: none;
+    }
+    .package-container .el-checkbox-button.is-checked .el-checkbox-button__inner {
+        background-color: #fff;
+        box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
+        border: 1px solid #002FA7;
+        color: #000;
+    }
+    .package-info .el-button--primary {
+        background-color: #002FA7;
+        border-color: #002FA7;
+    }
+    .package-info .el-button--primary.is-active, .el-button--primary:active {
+        color: #fff;
+        background: #002FA7;
+        border-radius: 4px;
+    }
+    .package-info .el-button--primary:focus, .el-button--primary:hover {
+        background: #002FA7;
+    }
+    @media screen and (max-width: 1000px) {
+        .package-info .el-form--inline .el-form-item__label {
+            display: none;
+        }
+    }
+</style>
+<style scoped>
+    h1 {
+        font-size: 36px;
+        font-family: HuaweiSans-Medium;
+        margin: 60px 0;
+    }
+    .form-btns {
+        display: inline-block;
+        text-align: right;
+    }
+    .form-button {
+        display: inline-block;
+        text-decoration: none;
+        color: #000;
+        height: 40px;
+        line-height: 40px;
+        border-radius:4px;
+        border: 1px solid rgba(0, 0, 0, 0.5);
+        padding: 0 20px;
+        margin-right: 20px;
+        cursor: pointer;
+    }
+    .form-button img {
+        width: 19px;
+        height: 15px;
+        vertical-align: middle;
+    }
+    .el-table .cell a {
+        color: #002FA7;
+        cursor: pointer;
+    }
+    .safety-bulletin-pagination {
+        display: block;
+        margin: 60px 0 200px 0;
+    }
+    .mobile-safety-bulletin-pagination {
+        display: none;
+    }
+    .package-info form {
+        display: flex;
+        justify-content: space-between;
+    }
+    .pc-search,
+    .pc-select {
+        display: block;
+    }
+    .mobile-search,
+    .mobile-select {
+        display: none;
+    }
+    .pc-pkg-table {
+        width: 100%;
+        display: block;
+    }
+    .mobile-pkg-table {
+        display: none;
+    }
+    .icon-search {
+        cursor: pointer;
+    }
+    @media screen and (max-width: 1000px) {
+        .pc-select,
+        .pc-search {
+            display: none;
+        }
+        .mobile-select,
+        .mobile-search {
+            display: block;
+            width: 315px;
+        }
+        .form-btns {
+            display: none;
+        }
+        .safety-bulletin-pagination {
+            display: none;
+        }
+        .pc-pkg-table {
+            display: none;
+        }
+        .mobile-pkg-table {
+            display: block;
+        }
+        .mobile-safety-bulletin-pagination {
+            display: block;
+            margin: 40px 0 90px;
+        }
+        .package-info .el-form-item:nth-child(2) {
+            margin:0 0 40px;
+        }
+        .mobile-pkg-table:nth-child(even) {
+            background: rgba(0, 0, 0, 0.05);
+        }
+        .mobile-pkg-table {
+            padding: 20px;
+        }
+        .mobile-pkg-table:last-child {
+            padding-bottom: 0;
+        }
+        .pkg-line li {
+            display: inline;
+            font-size: 12px;
+            line-height: 16px;
+        }
+        .pkg-line {
+            margin-bottom: 10px;
+        }
+        .pkg-line li:first-child {
+            font-family: Roboto-Regular;
+            font-weight: 400;
+        }
+        .pkg-line li:last-child {
+            font-family: Roboto-Light;
+            font-weight: 300;
+            color: rgba(0, 0, 0, 0.5);
+        }
+        .mobile-pkg-table .pkg-line .detail-notice {
+            color: #002FA7;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/packageship/web-ui/src/views/package/package-detail.vue b/packageship/web-ui/src/views/package/package-detail.vue
new file mode 100644
index 0000000000000000000000000000000000000000..26b43986927706eea9b756d227c7fc1f1d1a6064
--- /dev/null
+++ b/packageship/web-ui/src/views/package/package-detail.vue
@@ -0,0 +1,245 @@
+<template>
+    <div class="package-detail">
+        <h1>{{ detailData.pkg_name }} Issues</h1>
+        <div class="pkg-info">
+            <ul class="pkg-line">
+                <li class="detail-title">Version：</li>
+                <li>{{ detailData.version }}</li>
+            </ul>
+            <ul class="pkg-line">
+                <li class="detail-title">Release：</li>
+                <li>{{ detailData.release }}</li>
+            </ul>
+            <ul class="pkg-line">
+                <li class="detail-title">URL：</li>
+                <li>{{ detailData.url }}</li>
+            </ul>
+            <ul class="pkg-line">
+                <li class="detail-title">License：</li>
+                <li>{{ detailData.license }}</li>
+            </ul>
+            <ul class="pkg-line">
+                <li class="detail-title">Feature：</li>
+                <li>{{ detailData.feature }}</li>
+            </ul>
+            <ul class="pkg-line">
+                <li class="detail-title">Maintainer：</li>
+                <li>{{ detailData.maintainer }}</li>
+            </ul>
+            <ul class="pkg-line">
+                <li class="detail-title">Maintainlevel：</li>
+                <li>{{ detailData.maintainlevel }}</li>
+            </ul>
+            <ul class="pkg-line">
+                <li class="detail-title">Repo URL：</li>
+                <li>{{ detailData.gitee_url }}</li>
+            </ul>
+            <ul class="pkg-line">
+                <li class="detail-title">Summary：</li>
+                <li>{{ detailData.summary }}</li>
+            </ul>
+            <ul class="pkg-line">
+                <li class="detail-title">Description：</li>
+                <li>{{ detailData.description }}</li>
+            </ul>
+            <ul class="pkg-line">
+                <li class="detail-title">Subpack：</li>
+                <li><span v-for="(item, index) in detailData.subpack" :key="index">{{ item.name }} </span></li>
+            </ul>
+            <ul class="pkg-line">
+                <li class="detail-title">Required：</li>
+                <li><span v-for="(item, index) in detailData.buildrequired" :key="index">{{ item }} </span></li>
+            </ul>
+            <ul class="pkg-line">
+                <li class="detail-title">Issue Num：</li>
+                <li>{{ detailData.issue }}</li>
+            </ul>
+        </div>
+        <div class="subpack" v-for="(tables, index) in detailData.subpack" :key="index">
+            <p>{{ tables.name }}</p>
+            <div class="package-table">
+                <div class="provided">
+                    <el-table
+                            :data="tables.provides"
+                            stripe
+                            style="width: 100%">
+                        <el-table-column
+                                prop="name"
+                                label="Symbol"
+                                width="180">
+                        </el-table-column>
+                        <el-table-column
+                                prop="requiredby"
+                                label="Required by"
+                                width="180">
+                            <template  slot-scope="scope">
+                                <span v-for="(item, index) in scope.row.requiredby" :key="index">{{ item }}</span>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </div>
+                <div class="required">
+                    <el-table
+                            :data="tables.requires"
+                            stripe
+                            style="width: 100%">
+                        <el-table-column
+                                prop="name"
+                                label="Symbol"
+                                width="180">
+                        </el-table-column>
+                        <el-table-column
+                                prop="providedby"
+                                label="Provided by"
+                                width="180">
+                            <template  slot-scope="scope">
+                                <span v-for="(item, index) in scope.row.providedby" :key="index">{{ item }}</span>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import { packageDetail } from "../../api/repo";
+    export default {
+        name: "packageDetail",
+        data() {
+            return {
+                detailData: {},
+            }
+        },
+        mounted() {
+            this.getPackageDetail();
+        },
+        methods: {
+            getPackageDetail () {
+                packageDetail({
+                    pkg_name: this.$route.query.pkg_name,
+                    table_name: this.$route.query.table_name
+                })
+                    .then(response => {
+                        this.detailData = response.data;
+                    })
+                    .catch(data => {
+                        this.$message.error(data);
+                    });
+            }
+        }
+    }
+</script>
+<style lang="less">
+.package-table .el-table th, .has-gutter tr {
+    background: rgba(0, 0, 0, 0.05);
+}
+.package-table .has-gutter th>.cell {
+    color: #000;
+    font-size: 12px;
+    font-family: Roboto-Regular,Roboto;
+    font-weight: 400;
+}
+.package-table .el-table .cell {
+    font-size: 12px;
+    font-family: Roboto-Light,Roboto;
+    font-weight: 300;
+    color: #000;
+}
+.package-table .el-table td {
+    border: none;
+}
+</style>
+<style scoped>
+h1 {
+    font-size: 36px;
+    font-family: HuaweiSans-Medium;
+    margin: 60px 0;
+}
+.package-detail {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+.pkg-line .detail-title {
+    font-size: 14px;
+    font-family: Roboto-Bold,Roboto;
+    font-weight: bold;
+    margin-right: 20px;
+    width: 105px;
+}
+.pkg-line {
+    display: flex;
+    justify-content: flex-start;
+    margin-top: 20px;
+}
+.pkg-info li {
+    width: 986px;
+}
+.subpack {
+    margin-top: 60px;
+}
+.package-table {
+    display: flex;
+}
+.package-table p {
+    font-size: 14px;
+    font-family: Roboto-Regular;
+}
+.table-name {
+    display: flex;
+}
+.subpack li {
+    display: inline-block;
+    float: left;
+    line-height: 56px;
+    font-size: 14px;
+}
+.provided,
+.required {
+    max-width: 530px;
+}
+.provided {
+    margin-right: 60px;
+}
+.table-title {
+    width: 50%;
+}
+.cell span {
+    display: block;
+}
+    @media screen and (max-width: 1000px) {
+        .package-detail {
+            padding: 0 30px;
+        }
+        h1 {
+            font-size: 18px;
+            font-family: FZLTCHJW;
+            margin: 40px 0;
+        }
+        .package-table {
+            display: block;
+            margin-top: 20px;
+        }
+        .pkg-line .detail-title {
+            font-size: 12px;
+            font-family: Roboto-Regular;
+            font-weight: 400;
+            color: #000;
+            width: 300px;
+            margin-right: 10px;
+        }
+        .pkg-info li {
+            font-size: 12px;
+            font-family: Roboto-Regular;
+            font-weight: 400;
+            color: rgba(0, 0, 0, 0.5);
+        }
+        .provided {
+            margin: 0;
+        }
+        .required {
+            margin-top: 20px;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/packageship/web-ui/vue.config.js b/packageship/web-ui/vue.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..b3544cf46b1e9525c01a304e5826cec8a0c77eb4
--- /dev/null
+++ b/packageship/web-ui/vue.config.js
@@ -0,0 +1,49 @@
+/**
+ * @file  vue构建相关配置文件
+ * */
+
+const path = require('path');
+
+const resolve = dir => {
+    return path.join(__dirname, dir);
+};
+
+const BASE_URL = process.env.NODE_ENV === 'production' ? '/' : '/';
+
+module.exports = {
+    publicPath: BASE_URL,
+
+    pluginOptions: {
+        'style-resources-loader': {
+            preProcessor: 'less',
+            patterns: [
+                path.resolve(__dirname, './src/assets/style/vars.less')
+            ]
+        }
+    },
+
+    chainWebpack: config => {
+        config.resolve.alias
+            .set('@', resolve('src'))
+            .set('_c', resolve('src/components'))
+            .set('_libs', resolve('src/libs'));
+    },
+
+    // 设为false打包时不生成.map文件
+    productionSourceMap: false,
+
+    // 这里写你调用接口的基础路径，来解决跨域，如果设置了代理，那你本地开发环境的axios的baseUrl要写为 '' ，即空字符串
+    devServer: {
+        proxy: {
+            '/api': {
+                target: 'https://api.openeuler.org/pkgmanagedebug/',
+                ws: true,
+                changeOrigin: true,
+                pathRewrite: {
+                    '^/api': ''
+                }
+            }
+        }
+
+    }
+};
\ No newline at end of file