2

dist/static/css/chunk-03f11e0c.f3b87d2c.css

@@ -1 +0,0 @@
-.btn_content[data-v-25c1ed07]{text-align:center;position:absolute;left:50%;top:50%;width:100%;transform:translate(-50%,-100%)}

dist/static/css/chunk-05cd0a2c.cfa128bf.css

@@ -1 +0,0 @@
-.content[data-v-6e02f900]{height:calc(100% - 5rem);overflow:auto}.content .item[data-v-6e02f900]{width:94%;height:auto;position:relative;left:3%;margin:1.5rem 0;border-radius:1rem;background-color:#fff;box-shadow:.16rem .1rem .1rem .1rem #9d9b9b;font-size:.8rem;display:flex;flex-wrap:wrap}.content .item .add[data-v-6e02f900]{bottom:-.5rem;left:-.5rem}.content .item .add[data-v-6e02f900],.content .item .delete[data-v-6e02f900]{position:absolute;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;font-size:1.3rem;border-radius:50%;box-shadow:.1rem .1rem .1rem 0 #777676;background:#fff}.content .item .delete[data-v-6e02f900]{top:-.5rem;right:-.5rem}.content .item .unit[data-v-6e02f900]{width:50%;padding:.5rem;vertical-align:middle}.content .item .unit label[data-v-6e02f900]{width:40%;text-align:center}.footer_btn[data-v-6e02f900]{display:flex;justify-content:space-between;align-items:center}[data-v-6e02f900] .ivu-select-dropdown-list{padding:0!important}

dist/static/css/chunk-3b2bb27f.8890c993.css

@@ -1 +0,0 @@
-.item[data-v-e1ddcb52]{display:flex;justify-content:space-between;align-items:center;background:#fff}.return_item[data-v-e1ddcb52]{text-align:center;background:#fff;margin-top:1.5rem}.return_item div[data-v-e1ddcb52]{font-size:1.2rem;padding:1rem 0;font-weight:700}.item_icon[data-v-e1ddcb52]{width:20%;text-align:center}.item_title[data-v-e1ddcb52]{font-size:1rem;display:flex;justify-content:space-between;align-items:center;width:80%;border-bottom:.1rem solid #d8d5d5;padding:1rem 0}.img_content[data-v-e1ddcb52]{width:5rem;border-radius:50%;overflow:hidden;margin:1.5rem}.img_content img[data-v-e1ddcb52]{max-height:5rem;max-width:5rem}.info_content[data-v-e1ddcb52]{width:70%}.info_content div[data-v-e1ddcb52]{font-size:1.8rem;font-weight:700}.main_header[data-v-e1ddcb52]{background:#fff;margin-bottom:2rem}.header[data-v-e1ddcb52]{display:flex;justify-content:space-between;align-items:center}

dist/static/css/chunk-430782b8.9dc125cf.css

@@ -1 +0,0 @@
-.view[data-v-7bd692c6]{height:100%;padding:0;overflow-x:hidden}.form[data-v-7bd692c6]{box-sizing:border-box;width:100%;height:100%;position:absolute;top:8.8rem;padding:1.7rem 1.5rem;font-size:18px!important;font-weight:700}.logo[data-v-7bd692c6]{width:6rem;height:6rem;position:absolute;top:20%;left:50%;transform:translate(-50%,-70%)}.logo img[data-v-7bd692c6]{width:100%;height:100%}.header[data-v-7bd692c6]{color:#fff;font-size:1.5rem;position:relative;width:100%;top:3rem;left:1rem}[data-v-7bd692c6] .inp{background:#2a4470!important;opacity:.4;border:none}input[data-v-7bd692c6]{color:#fff}.inp[data-v-7bd692c6]:focus{background-color:#04ffd5;color:#fff;border:1px solid #76cfff}[data-v-7bd692c6] .col-2,[data-v-7bd692c6] .col-3{color:#fff;font-family:PingFangSC-Medium,sans-serif;text-shadow:1px 1px 1px #4fc9f2;letter-spacing:2px}.btn_login[data-v-7bd692c6]{background:url(../../static/img/btn_login.a8f1c793.png);display:flex;height:3.5rem;justify-content:center;align-items:center;background-repeat:no-repeat;background-size:cover}

dist/static/css/chunk-59d32064.d6fa6cf3.css

@@ -1 +0,0 @@
-.content[data-v-3360b0f3]{height:calc(100% - 5rem);overflow:auto}.content .item[data-v-3360b0f3]{width:94%;position:relative;left:3%;margin:1.5rem 0;border-radius:1rem;background-color:#fff;box-shadow:.16rem .1rem .1rem .1rem #9d9b9b;font-size:.8rem;display:flex;flex-wrap:wrap}.content .item .add[data-v-3360b0f3]{bottom:-.5rem;left:-.5rem}.content .item .add[data-v-3360b0f3],.content .item .delete[data-v-3360b0f3]{position:absolute;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;font-size:1.3rem;border-radius:50%;box-shadow:.1rem .1rem .1rem 0 #777676;background:#fff}.content .item .delete[data-v-3360b0f3]{top:-.5rem;right:-.5rem}.content .item .unit[data-v-3360b0f3]{width:50%;padding:.5rem;vertical-align:middle}.content .item .unit label[data-v-3360b0f3]{width:40%;text-align:center}.footer_btn[data-v-3360b0f3]{display:flex;justify-content:space-between;align-items:center}[data-v-3360b0f3] .ivu-modal-content{top:-5rem}[data-v-3360b0f3] .ivu-form-item{margin-bottom:.5rem}

dist/static/css/chunk-698e9c2a.6400458c.css

@@ -1 +0,0 @@
-.header[data-v-263b028d]{width:94%;height:7rem;position:relative;top:.5rem;left:3%;box-shadow:.16rem .1rem .1rem .1rem #9d9b9b;border-radius:1rem;padding:.4rem .7rem 0 1rem;background:#fff}.header_btn[data-v-263b028d]{border-radius:1rem;padding:.1rem;width:5rem;display:flex;justify-content:space-around;align-items:center}.header_top[data-v-263b028d]{display:flex;justify-content:space-between;align-items:center}.ot[data-v-263b028d]{position:relative;top:-1.3rem}.header_middle1[data-v-263b028d]{display:flex;justify-content:space-between;align-items:center}.header_middle1 .ft[data-v-263b028d]{font-size:1.5rem;width:5rem;text-align:center}.header_middle[data-v-263b028d]{position:relative;top:-.3rem;display:flex;justify-content:space-between;align-items:center}.btn-group-vertical>.btn[data-v-263b028d],[data-v-263b028d] .btn-group>.btn{background:#fff;color:#2c3e50;outline:none;border:none;margin:0;z-index:3}.header_footer[data-v-263b028d]{position:relative;top:-1.7rem;display:flex;justify-content:space-between;align-items:center}.header_footer div[data-v-263b028d]{font-size:.5rem;color:#f4882a}.bdy[data-v-263b028d]{padding:1rem;position:relative;width:94%;top:3rem;height:14rem;border-radius:1rem;left:3%;box-shadow:.16rem .1rem .1rem .1rem #9d9b9b;background:#fff}.bdy_btn[data-v-263b028d]{margin-top:3rem;display:flex;justify-content:center;align-items:center}[data-v-263b028d] .ivu-select-selection{height:100%;border:none}[data-v-263b028d] .ivu-select-input{height:3.4rem;font-size:1.5rem}

dist/static/css/chunk-6e4aceda.ae4b4cf0.css

@@ -1 +0,0 @@
-.saoma[data-v-6b630bc8]{width:100vw;height:100vh}.qr-scanner[data-v-6b630bc8]{background-image:linear-gradient(0deg,transparent 24%,rgba(32,255,77,.1) 25%,rgba(32,255,77,.1) 26%,transparent 27%,transparent 74%,rgba(32,255,77,.1) 75%,rgba(32,255,77,.1) 76%,transparent 77%,transparent),linear-gradient(90deg,transparent 24%,rgba(32,255,77,.1) 25%,rgba(32,255,77,.1) 26%,transparent 27%,transparent 74%,rgba(32,255,77,.1) 75%,rgba(32,255,77,.1) 76%,transparent 77%,transparent);background-size:3rem 3rem;background-position:-1rem -1rem;width:100%;height:100vh;position:relative;background-color:rgba(17,17,17,0)}.qr-scanner .box[data-v-6b630bc8]{width:213px;height:213px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);overflow:hidden;border:.1rem solid rgba(0,255,51,.2)}.qr-scanner .line[data-v-6b630bc8]{height:calc(100% - 2px);width:100%;background:linear-gradient(180deg,rgba(0,255,51,0) 43%,#0f3 211%);border-bottom:3px solid #0f3;transform:translateY(-100%);animation:radar-beam-6b630bc8 2s infinite alternate;animation-timing-function:cubic-bezier(.53,0,.43,.99);animation-delay:1.4s}.qr-scanner .angle[data-v-6b630bc8]:after,.qr-scanner .angle[data-v-6b630bc8]:before,.qr-scanner .box[data-v-6b630bc8]:after,.qr-scanner .box[data-v-6b630bc8]:before{content:"";display:block;position:absolute;width:3vw;height:3vw;border:.2rem solid transparent}.qr-scanner .box[data-v-6b630bc8]:after,.qr-scanner .box[data-v-6b630bc8]:before{top:0;border-top-color:#0f3}.qr-scanner .angle[data-v-6b630bc8]:after,.qr-scanner .angle[data-v-6b630bc8]:before{bottom:0;border-bottom-color:#0f3}.qr-scanner .angle[data-v-6b630bc8]:before,.qr-scanner .box[data-v-6b630bc8]:before{left:0;border-left-color:#0f3}.qr-scanner .angle[data-v-6b630bc8]:after,.qr-scanner .box[data-v-6b630bc8]:after{right:0;border-right-color:#0f3}@keyframes radar-beam-6b630bc8{0%{transform:translateY(-100%)}to{transform:translateY(0)}}

npminstall-debug.log

@@ -0,0 +1,195 @@
+{
+  root: 'C:\\Users\\86151\\Desktop\\扫码修改\\DWY_mobile',
+  registry: 'https://registry.npmmirror.com',
+  pkgs: [],
+  production: false,
+  cacheStrict: false,
+  cacheDir: 'C:\\Users\\86151\\.npminstall_tarball',
+  env: {
+    npm_config_registry: 'https://registry.npmmirror.com',
+    npm_config_argv: '{"remain":[],"cooked":["--fix-bug-versions","--china","--userconfig=C:\\\\Users\\\\86151\\\\.cnpmrc","--disturl=https://cdn.npmmirror.com/binaries/node","--registry=https://registry.npmmirror.com"],"original":["--fix-bug-versions","--china","--userconfig=C:\\\\Users\\\\86151\\\\.cnpmrc","--disturl=https://cdn.npmmirror.com/binaries/node","--registry=https://registry.npmmirror.com"]}',
+    npm_config_user_agent: 'npminstall/7.9.0 npm/? node/v16.16.0 win32 x64',
+    npm_config_cache: 'C:\\Users\\86151\\.npminstall_tarball',
+    NODE: 'C:\\Program Files\\nodejs\\node.exe',
+    npm_node_execpath: 'C:\\Program Files\\nodejs\\node.exe',
+    npm_execpath: 'C:\\Users\\86151\\AppData\\Roaming\\npm\\node_modules\\cnpm\\node_modules\\npminstall\\bin\\install.js',
+    npm_config_userconfig: 'C:\\Users\\86151\\.cnpmrc',
+    npm_config_disturl: 'https://cdn.npmmirror.com/binaries/node',
+    npm_config_r: 'https://registry.npmmirror.com',
+    COREPACK_NPM_REGISTRY: 'https://registry.npmmirror.com',
+    NODEJS_ORG_MIRROR: 'https://cdn.npmmirror.com/binaries/node',
+    NVM_NODEJS_ORG_MIRROR: 'https://cdn.npmmirror.com/binaries/node',
+    PHANTOMJS_CDNURL: 'https://cdn.npmmirror.com/binaries/phantomjs',
+    CHROMEDRIVER_CDNURL: 'https://cdn.npmmirror.com/binaries/chromedriver',
+    OPERADRIVER_CDNURL: 'https://cdn.npmmirror.com/binaries/operadriver',
+    CYPRESS_DOWNLOAD_PATH_TEMPLATE: 'https://cdn.npmmirror.com/binaries/cypress/${version}/${platform}-${arch}/cypress.zip',
+    ELECTRON_MIRROR: 'https://cdn.npmmirror.com/binaries/electron/',
+    ELECTRON_BUILDER_BINARIES_MIRROR: 'https://cdn.npmmirror.com/binaries/electron-builder-binaries/',
+    SASS_BINARY_SITE: 'https://cdn.npmmirror.com/binaries/node-sass',
+    SWC_BINARY_SITE: 'https://cdn.npmmirror.com/binaries/node-swc',
+    NWJS_URLBASE: 'https://cdn.npmmirror.com/binaries/nwjs/v',
+    PUPPETEER_DOWNLOAD_HOST: 'https://cdn.npmmirror.com/binaries/chrome-for-testing',
+    PUPPETEER_DOWNLOAD_BASE_URL: 'https://cdn.npmmirror.com/binaries/chrome-for-testing',
+    PLAYWRIGHT_DOWNLOAD_HOST: 'https://cdn.npmmirror.com/binaries/playwright',
+    SENTRYCLI_CDNURL: 'https://cdn.npmmirror.com/binaries/sentry-cli',
+    SAUCECTL_INSTALL_BINARY_MIRROR: 'https://cdn.npmmirror.com/binaries/saucectl',
+    RE2_DOWNLOAD_MIRROR: 'https://cdn.npmmirror.com/binaries/node-re2',
+    RE2_DOWNLOAD_SKIP_PATH: 'true',
+    PRISMA_ENGINES_MIRROR: 'https://cdn.npmmirror.com/binaries/prisma',
+    npm_config_better_sqlite3_binary_host: 'https://cdn.npmmirror.com/binaries/better-sqlite3',
+    npm_config_keytar_binary_host: 'https://cdn.npmmirror.com/binaries/keytar',
+    npm_config_sharp_binary_host: 'https://cdn.npmmirror.com/binaries/sharp',
+    npm_config_sharp_libvips_binary_host: 'https://cdn.npmmirror.com/binaries/sharp-libvips',
+    npm_config_robotjs_binary_host: 'https://cdn.npmmirror.com/binaries/robotjs',
+    npm_rootpath: 'C:\\Users\\86151\\Desktop\\扫码修改\\DWY_mobile',
+    INIT_CWD: 'C:\\Users\\86151\\Desktop\\扫码修改\\DWY_mobile'
+  },
+  binaryMirrors: {
+    ENVS: {
+      COREPACK_NPM_REGISTRY: 'https://registry.npmmirror.com',
+      NODEJS_ORG_MIRROR: 'https://cdn.npmmirror.com/binaries/node',
+      NVM_NODEJS_ORG_MIRROR: 'https://cdn.npmmirror.com/binaries/node',
+      PHANTOMJS_CDNURL: 'https://cdn.npmmirror.com/binaries/phantomjs',
+      CHROMEDRIVER_CDNURL: 'https://cdn.npmmirror.com/binaries/chromedriver',
+      OPERADRIVER_CDNURL: 'https://cdn.npmmirror.com/binaries/operadriver',
+      CYPRESS_DOWNLOAD_PATH_TEMPLATE: 'https://cdn.npmmirror.com/binaries/cypress/${version}/${platform}-${arch}/cypress.zip',
+      ELECTRON_MIRROR: 'https://cdn.npmmirror.com/binaries/electron/',
+      ELECTRON_BUILDER_BINARIES_MIRROR: 'https://cdn.npmmirror.com/binaries/electron-builder-binaries/',
+      SASS_BINARY_SITE: 'https://cdn.npmmirror.com/binaries/node-sass',
+      SWC_BINARY_SITE: 'https://cdn.npmmirror.com/binaries/node-swc',
+      NWJS_URLBASE: 'https://cdn.npmmirror.com/binaries/nwjs/v',
+      PUPPETEER_DOWNLOAD_HOST: 'https://cdn.npmmirror.com/binaries/chrome-for-testing',
+      PUPPETEER_DOWNLOAD_BASE_URL: 'https://cdn.npmmirror.com/binaries/chrome-for-testing',
+      PLAYWRIGHT_DOWNLOAD_HOST: 'https://cdn.npmmirror.com/binaries/playwright',
+      SENTRYCLI_CDNURL: 'https://cdn.npmmirror.com/binaries/sentry-cli',
+      SAUCECTL_INSTALL_BINARY_MIRROR: 'https://cdn.npmmirror.com/binaries/saucectl',
+      RE2_DOWNLOAD_MIRROR: 'https://cdn.npmmirror.com/binaries/node-re2',
+      RE2_DOWNLOAD_SKIP_PATH: 'true',
+      PRISMA_ENGINES_MIRROR: 'https://cdn.npmmirror.com/binaries/prisma',
+      npm_config_better_sqlite3_binary_host: 'https://cdn.npmmirror.com/binaries/better-sqlite3',
+      npm_config_keytar_binary_host: 'https://cdn.npmmirror.com/binaries/keytar',
+      npm_config_sharp_binary_host: 'https://cdn.npmmirror.com/binaries/sharp',
+      npm_config_sharp_libvips_binary_host: 'https://cdn.npmmirror.com/binaries/sharp-libvips',
+      npm_config_robotjs_binary_host: 'https://cdn.npmmirror.com/binaries/robotjs'
+    },
+    '@ali/s2': { host: 'https://cdn.npmmirror.com/binaries/looksgood-s2' },
+    sharp: { replaceHostFiles: [Array], replaceHostMap: [Object] },
+    '@tensorflow/tfjs-node': {
+      replaceHostFiles: [Array],
+      replaceHostRegExpMap: [Object],
+      replaceHostMap: [Object]
+    },
+    cypress: {
+      host: 'https://cdn.npmmirror.com/binaries/cypress',
+      newPlatforms: [Object]
+    },
+    'utf-8-validate': {
+      host: 'https://cdn.npmmirror.com/binaries/utf-8-validate/v{version}'
+    },
+    xprofiler: {
+      remote_path: './xprofiler/v{version}/',
+      host: 'https://cdn.npmmirror.com/binaries'
+    },
+    leveldown: { host: 'https://cdn.npmmirror.com/binaries/leveldown/v{version}' },
+    couchbase: { host: 'https://cdn.npmmirror.com/binaries/couchbase/v{version}' },
+    gl: { host: 'https://cdn.npmmirror.com/binaries/gl/v{version}' },
+    sqlite3: {
+      host: 'https://cdn.npmmirror.com/binaries/sqlite3',
+      remote_path: 'v{version}'
+    },
+    '@journeyapps/sqlcipher': { host: 'https://cdn.npmmirror.com/binaries' },
+    grpc: {
+      host: 'https://cdn.npmmirror.com/binaries',
+      remote_path: '{name}/v{version}'
+    },
+    'grpc-tools': { host: 'https://cdn.npmmirror.com/binaries' },
+    wrtc: {
+      host: 'https://cdn.npmmirror.com/binaries',
+      remote_path: '{name}/v{version}'
+    },
+    fsevents: { host: 'https://cdn.npmmirror.com/binaries/fsevents' },
+    nodejieba: { host: 'https://cdn.npmmirror.com/binaries/nodejieba' },
+    canvas: { host: 'https://cdn.npmmirror.com/binaries/canvas' },
+    'skia-canvas': { host: 'https://cdn.npmmirror.com/binaries/skia-canvas' },
+    'flow-bin': {
+      replaceHost: 'https://github.com/facebook/flow/releases/download/v',
+      host: 'https://cdn.npmmirror.com/binaries/flow/v'
+    },
+    'jpegtran-bin': {
+      replaceHost: [Array],
+      host: 'https://cdn.npmmirror.com/binaries/jpegtran-bin'
+    },
+    'cwebp-bin': {
+      replaceHost: [Array],
+      host: 'https://cdn.npmmirror.com/binaries/cwebp-bin'
+    },
+    'zopflipng-bin': {
+      replaceHost: [Array],
+      host: 'https://cdn.npmmirror.com/binaries/zopflipng-bin'
+    },
+    'optipng-bin': {
+      replaceHost: [Array],
+      host: 'https://cdn.npmmirror.com/binaries/optipng-bin'
+    },
+    mozjpeg: {
+      replaceHost: [Array],
+      host: 'https://cdn.npmmirror.com/binaries/mozjpeg-bin'
+    },
+    gifsicle: {
+      replaceHost: [Array],
+      host: 'https://cdn.npmmirror.com/binaries/gifsicle-bin'
+    },
+    'pngquant-bin': {
+      replaceHost: [Array],
+      host: 'https://cdn.npmmirror.com/binaries/pngquant-bin',
+      replaceHostMap: [Object]
+    },
+    'pngcrush-bin': {
+      replaceHost: [Array],
+      host: 'https://cdn.npmmirror.com/binaries/pngcrush-bin'
+    },
+    'jpeg-recompress-bin': {
+      replaceHost: [Array],
+      host: 'https://cdn.npmmirror.com/binaries/jpeg-recompress-bin'
+    },
+    'advpng-bin': {
+      replaceHost: [Array],
+      host: 'https://cdn.npmmirror.com/binaries/advpng-bin'
+    },
+    'pngout-bin': {
+      replaceHost: [Array],
+      host: 'https://cdn.npmmirror.com/binaries/pngout-bin'
+    },
+    'jpegoptim-bin': {
+      replaceHost: [Array],
+      host: 'https://cdn.npmmirror.com/binaries/jpegoptim-bin'
+    },
+    argon2: { host: 'https://cdn.npmmirror.com/binaries/argon2' },
+    'ali-zeromq': { host: 'https://cdn.npmmirror.com/binaries/ali-zeromq' },
+    'ali-usb_ctl': { host: 'https://cdn.npmmirror.com/binaries/ali-usb_ctl' },
+    'gdal-async': { host: 'https://cdn.npmmirror.com/binaries/node-gdal-async' },
+    'libpg-query': { host: 'https://cdn.npmmirror.com/binaries' }
+  },
+  forbiddenLicenses: null,
+  flatten: false,
+  proxy: undefined,
+  prune: false,
+  disableFallbackStore: false,
+  workspacesMap: Map(0) {},
+  enableWorkspace: false,
+  workspaceRoot: 'C:\\Users\\86151\\Desktop\\扫码修改\\DWY_mobile',
+  isWorkspaceRoot: true,
+  isWorkspacePackage: false,
+  offline: false,
+  strictSSL: true,
+  ignoreScripts: false,
+  foregroundScripts: false,
+  ignoreOptionalDependencies: false,
+  detail: false,
+  forceLinkLatest: false,
+  trace: false,
+  engineStrict: false,
+  registryOnly: false,
+  client: false,
+  autoFixVersion: [Function: autoFixVersion]
+}

package.json

@@ -13,6 +13,7 @@
     "bootstrap-vue": "^2.23.1",
     "core-js": "^3.6.5",
     "jquery": "^3.7.0",
+    "node-sass": "^9.0.0",
     "view-design": "^4.7.0",
     "vue": "^2.7.14",
     "vue-axios": "^3.5.2",
@@ -34,9 +35,10 @@
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.0",
     "eslint-plugin-vue": "^6.2.2",
-    "node-sass": "^4.14.1",
-    "sass-loader": "^9.0.3",
+    "sass": "^1.26.5",
+    "sass-loader": "^7.0.0",
     "vue-template-compiler": "^2.6.11",
+    "webpack": "latest",
     "webpack-glsl-loader": "^1.0.1"
   },
   "eslintConfig": {

src/views/Login.vue

@@ -7,88 +7,49 @@
       <img src="../assets/images/home_title.png">
     </div>
     <b-form class="form">
-      <b-form-group
-        label="账号"
-        label-for="input-1"
-        style="margin-bottom: 1rem"
-        label-cols="2"
-      >
-        <b-form-input
-          id="input-1"
-          v-model="form.account"
-          required
-          class="inp"
-          style="
+      <b-form-group label="账号" label-for="input-1" style="margin-bottom: 1rem" label-cols="2">
+        <b-form-input id="input-1" v-model="form.account" required class="inp" style="
             height: 3rem;
             font-size: 1.1rem;
             font-weight: 500;
             letter-spacing: 0.1rem;
-          "
-          placeholder="请输入账号"
-        ></b-form-input>
+            color: #fff;
+          " placeholder="请输入账号"></b-form-input>
       </b-form-group>
 
-      <b-form-group
-        label="密码"
-        label-for="input-2"
-        style="margin-bottom: 1rem"
-        label-cols="2"
-      >
-        <b-form-input
-          id="input-2"
-          v-model="form.password"
-          type="password"
-          autocomplete="off"
-          class="inp"
-          style="
+      <b-form-group label="密码" label-for="input-2" style="margin-bottom: 1rem" label-cols="2">
+        <b-form-input id="input-2" v-model="form.password" type="password" autocomplete="off" class="inp" style="
             height: 3rem;
             font-size: 1.1rem;
             font-weight: 500;
             letter-spacing: 0.1rem;
 
-          "
-          required
-          placeholder="请输入密码"
-        ></b-form-input>
+          " required placeholder="请输入密码"></b-form-input>
       </b-form-group>
-        <b-form-group
-            label="所属站点"
-            label-for="input-3"
-            style="margin: 1rem 0"
-            label-cols="3"
-        >
-          <b-form-select
-              id="input-3"
-              v-model="form.site"
-              :options="siteList"
-              class="inp"
-              style="height: 3rem;
+      <b-form-group label="所属站点" label-for="input-3" style="margin: 1rem 0" label-cols="3">
+        <b-form-select id="input-3" v-model="form.site" :options="siteList" class="inp" style="height: 3rem;
               width:100%;
              padding: 0 0 0 0.5rem;
             font-size: 1.1rem;
             font-weight: 500;
             letter-spacing: 0.1rem;
-           "
-              required
-              placeholder="请选择站点"
-              @change="handleChangeSite"
-          ></b-form-select>
+           " required placeholder="请选择站点" @change="handleChangeSite"></b-form-select>
       </b-form-group>
       <div @click="onSubmit" style="
           width: 100%;
 
           margin-top: 3rem;
-        "
-           class="btn_login"
-      >
-        <span style="color: #ffffff;font-family: PingFangSC-Medium, sans-serif;text-shadow:1px 1px 1px #4FC9F2;letter-spacing: 2px;font-size: 1.2rem">登录</span></div>
+        " class="btn_login">
+        <span
+          style="color: #ffffff;font-family: PingFangSC-Medium, sans-serif;text-shadow:1px 1px 1px #4FC9F2;letter-spacing: 2px;font-size: 1.2rem">登录</span>
+      </div>
     </b-form>
   </div>
 </template>
 
 <script>
 export default {
-  data () {
+  data() {
     return {
       form: {
         account: '',
@@ -99,8 +60,8 @@ export default {
       siteList: []
     }
   },
-  mounted () {
-    const data = { url: 'http://121.36.142.167:7774/jbl/api/site/all/ignore-action?_allow_anonymous=true'}
+  mounted() {
+    const data = { url: 'http://121.36.142.167:7774/jbl/api/site/all/ignore-action?_allow_anonymous=true' }
     this.axios.post('/api/testdwyget', data).then(res => {
       res.data.forEach(v => {
         v.text = v.name
@@ -110,10 +71,10 @@ export default {
     })
   },
   methods: {
-    handleChangeSite (e) {
+    handleChangeSite(e) {
       this.form.site_show = this.siteList.find(v => v.code === e).name
     },
-    onSubmit () {
+    onSubmit() {
       const data = {
         post: {
           name: this.form.account, password: this.form.password, rememberMe: true
@@ -127,7 +88,7 @@ export default {
             return this.$Message.error(res.data.errorMessage)
           } else {
             this.$Message.success(res.msg)
-            localStorage.setItem('site', JSON.stringify({ site: this.form.site, site_show : this.form.site_show}))
+            localStorage.setItem('site', JSON.stringify({ site: this.form.site, site_show: this.form.site_show }))
             localStorage.setItem('token', res.data.token)
             localStorage.setItem('userDto', JSON.stringify(res.data.userDto))
             this.$router.push('/cms/home')
@@ -144,17 +105,19 @@ export default {
   padding: 0;
   overflow-x: hidden;
 }
+
 .form {
   box-sizing: border-box;
   width: 100%;
   height: 100%;
-
+  color: #fff;
   position: absolute;
   top: 8.8rem;
   padding: 1.7rem 1.5rem;
   font-size: 18px !important;
   font-weight: bold;
 }
+
 .logo {
   width: 6rem;
   height: 6rem;
@@ -162,46 +125,60 @@ export default {
   top: 20%;
   left: 50%;
   transform: translate(-50%, -70%);
+
   img {
     width: 100%;
     height: 100%;
   }
 }
+
 .header {
   color: #fff;
   font-size: 1.5rem;
   position: relative;
   width: 100%;
   top: 3rem;
- left: 1rem;
+  left: 1rem;
+}
+
+::-webkit-input-placeholder {
+  color: #ffffff84;
+  /* 设置占位符文字的颜色 */
 }
-/deep/.inp{
-   background: #2A4470 !important;
-  opacity: 0.4;
+
+/deep/.inp {
+  background: #2A4470 !important;
+  // opacity: 0.4;
   border: none;
+  color: #fff;
 }
-input{
+
+input {
   color: #ffffff;
 }
+
 .inp:focus {
   //background: #fff !important;
-background-color: #04FFD5;
+  background-color: #04FFD5;
   color: #ffffff;
   border: 1px solid #76CFFF;
 }
-/deep/.col-2{
+
+/deep/.col-2 {
   color: #ffffff;
   font-family: PingFangSC-Medium, sans-serif;
-  text-shadow:1px 1px 1px #4FC9F2;
+  text-shadow: 1px 1px 1px #4FC9F2;
   letter-spacing: 2px;
 }
-/deep/.col-3{
- color: #ffffff;
+
+/deep/.col-3 {
+  color: #ffffff;
   font-family: PingFangSC-Medium, sans-serif;
-  text-shadow:1px 1px 1px #4FC9F2;
+  text-shadow: 1px 1px 1px #4FC9F2;
   letter-spacing: 2px;
 }
-.btn_login{
+
+.btn_login {
   background: url("../assets/images/btn_login.png");
   display: flex;
   height: 3.5rem;

src/views/page/Dispatch/detail.vue

@@ -1,18 +1,92 @@
 <template>
-  <div>
+  <div style="overflow-y: scroll;padding-bottom: 9rem;box-sizing: border-box;">
+    <div style="background-image: url('../../../assets/images/bc.png');background-size: 100% 100%;">
+      <div class="home_header">发货</div>
+      <div class="home_header_line"></div>
+      <div class="home_con_body">
+        <div class="home_con_s">
+          <div v-if="is_show" class="pack_up">
+            <img @click="handleShow" src="../../../assets/home/collect.png" alt="">
+          </div>
+          <div v-if="!is_show" :class="!is_show ? 'pack_up_d' : ''" class="pack_up" style="display: flex;gap: .3125rem;">
+            <div style="font-size: 0.88rem;
+color: #ABDFFF;">展开</div>
+            <img @click="handleShow" style="width: 0.41rem;height: 0.69rem;" src="../../../assets/home/zk.png" alt="">
+          </div>
+          <div v-if="is_show" class="pack_up_con">
+            <p class="pack_up_name">王晓伟</p>
+            <div class="pack_up_grid">
+              <div>
+                <p>产品总数</p>
+                <div><span>{{ total_num }}</span><span>件</span></div>
+              </div>
+              <div>
+                <p>已扫总数</p>
+                <div><span>{{ scan_num }}</span><span>件</span></div>
+              </div>
+              <div>
+                <p>未扫总数</p>
+                <div><span>{{ total_num - scan_num }}</span><span>件</span></div>
+              </div>
+              <!-- <div>
+                <p>包装件数</p>
+                <div><span>1245</span><span>件</span></div>
+              </div> -->
+            </div>
+          </div>
+        </div>
+
+        <div class="send_work" v-if="tableData.length > 0" v-for="(item, index) in tableData" :key="index">
+          <div class="check_box">
+            <div @click="handleChoose(item, index)" :class="item.is_choose ? 'check_box_c_active' : 'check_box_c'">
+            </div>
+          </div>
+          <div class="secd_flex">
+            <div class="secd_title">
+              <span>销售单号：</span><span> {{ item.bus_no }}</span>
+            </div>
+            <span class="secd_title_d">{{ item.product_title }}</span>
+            <div class="secd_g"><span>规格型号：</span><span>{{ item.product_size }}</span></div>
+            <div class="secd_flex_w">
+              <div class="secd_flex_s">
+                <span>已扫到数量：</span>
+                <span>{{ item.out_qty }}件</span>
+              </div>
+              <div class="secd_flex_s">
+                <span>未发货数量：</span>
+                <span>{{ item.this_delivery_qty - item.out_qty }}件</span>
+              </div>
+            </div>
+          </div>
+
+        </div>
+        <div v-if="tableData.length == 0"
+          style="display: flex;width: 100%;height: 10rem;justify-content: center;align-items: center;">
+
+          <Spin size="small" />
+          <Spin />
+          <Spin size="small" />
+
+        </div>
+        <div class="footer">
+
+          <div class="return_btn" @click="handleReturn">返回</div>
+          <div class="confirm_btn" @click="handelGoSure">确认</div>
+        </div>
+      </div>
+    </div>
+
+
+  </div>
+  <!-- <div>
     <div class="header">
       <div class="header_top">
-        <Button
-                type="primary"
-                class="header_btn"
-                ghost
-                @click="handleShow"
-                :icon="is_show ? 'ios-arrow-dropup' : 'ios-arrow-dropdown'"
-        >
+        <Button type="primary" class="header_btn" ghost @click="handleShow"
+          :icon="is_show ? 'ios-arrow-dropup' : 'ios-arrow-dropdown'">
           <div style="margin-right: 0.6rem">
             {{ is_show ? "收起" : "展开" }}
-          </div></Button
-        >
+          </div>
+        </Button>
         <div style="margin-right: 1rem; color: #66a9f0">王小伟</div>
       </div>
       <div class="header_middle">
@@ -33,13 +107,13 @@
         </b-dropdown>
       </div>
       <div class="header_middle1 ot">
-        <div class="ft">{{total_num}} &nbsp;</div>
-        <div class="ft">{{scan_num}} &nbsp;</div>
-        <div class="ft">{{total_num-scan_num}} &nbsp;</div>
+        <div class="ft">{{ total_num }} &nbsp;</div>
+        <div class="ft">{{ scan_num }} &nbsp;</div>
+        <div class="ft">{{ total_num - scan_num }} &nbsp;</div>
       </div>
       <div class="header_footer">
-        <div style="margin-left: 1rem">已发货{{transport_total}}</div>
-        <!--<div style="margin-right: 1.4rem">已完成10%</div>-->
+        <div style="margin-left: 1rem">已发货{{ transport_total }}</div>
+
       </div>
     </div>
     <div class="bdy">
@@ -51,44 +125,28 @@
           <th style="width: 3rem">已扫到数量</th>
           <th style="width: 3rem">未发货数量</th>
         </tr>
-        <tr
-                v-for="(item, index) in tableData"
-                :key="index"
-                @click="handleChoose(item, index)"
-        >
+        <tr v-for="(item, index) in tableData" :key="index" @click="handleChoose(item, index)">
           <td>
             {{ item.bus_no }}
           </td>
           <td>{{ item.product_title }}</td>
-          <td>{{item.product_size}}</td>
+          <td>{{ item.product_size }}</td>
           <td>{{ item.out_qty }}</td>
           <td>{{ item.this_delivery_qty - item.out_qty }}</td>
         </tr>
       </table>
     </div>
     <div class="footer">
-      <Button
-              type="primary"
-              class="header_btn"
-              style="margin-right: 3rem; height: 2.6rem"
-              @click="handleReturn"
-      >
-        返回</Button
-      >
-      <Button
-              type="primary"
-              class="header_btn"
-              style="margin-left: 3rem; height: 2.6rem"
-              @click="handelGoSure"
-      >
-        确认</Button
-      >
+      <Button type="primary" class="header_btn" style="margin-right: 3rem; height: 2.6rem" @click="handleReturn">
+        返回</Button>
+      <Button type="primary" class="header_btn" style="margin-left: 3rem; height: 2.6rem" @click="handelGoSure">
+        确认</Button>
     </div>
-  </div>
+  </div> -->
 </template>
 <script>
 export default {
-  data () {
+  data() {
     return {
       tableData: [],
       key_tableData: {},
@@ -105,7 +163,7 @@ export default {
       is_box_data: [],
     }
   },
-  mounted () {
+  mounted() {
     // if (localStorage.getItem('fyy_target')) {
     //   data.target = JSON.parse(localStorage.getItem('fyy_target'))
     // }
@@ -121,7 +179,7 @@ export default {
   },
   methods: {
     // 原始数据获取
-    initData (row) {
+    initData(row) {
       this.axios.post('/api/testdwyget', { ...row }).then(res => {
         this.tableData.push(...res.data.data.send_goods_out_product);
         res.data.data.send_goods_out_product.forEach((element, index) => {
@@ -149,12 +207,17 @@ export default {
         }
         const dataBox = {
           url: 'http://121.36.142.167:7774/jbl/api/module-data/box_orders/box_orders/diy/defective_order_no_list',
+<<<<<<< HEAD
           post: { "defective_order_no_list":text}
+=======
+          post: { "defective_order_no_list": ["BZ00025"] }
+>>>>>>> 2baf6b15e6a037b9f129e53ff9b04b009505652e
         }
         this.initDataBox(dataBox)
       })
     },
     // 扫描数据获取
+<<<<<<< HEAD
     initDataBox (row) {
       this.$Message.warning(row.post["defective_order_no_list"].toString())
       this.axios.post('/api/testdwy', { ...row }).then(res => {
@@ -173,17 +236,26 @@ export default {
           })
           this.deelTableData();
         }
+=======
+    initDataBox(row) {
+      this.axios.post('/api/testdwy', { ...row }).then(res => {
+        res.data.data.forEach((element, index) => {
+          let object = { "order_item_id": element.order_item_id, "order_no": element.order_no, "box_num": element.box_num, "product_no": element.product_no, "box_no": element.box_orders.defective_order_no, "box_id": element.box_orders.id };
+          this.scan_data.push(object)
+        })
+        this.deelTableData();
+>>>>>>> 2baf6b15e6a037b9f129e53ff9b04b009505652e
       })
     },
-    deelUniqueKey(element){
+    deelUniqueKey(element) {
       let key = element.box_orders_show
       return key;
     },
     // 将原始数据处理拼接成提交的数据
-    deelTableData () {
+    deelTableData() {
       let new_table_data = [];
       this.scan_data.forEach((element, index) => {
-        if (this.is_box_data.indexOf(element.box_no) === -1 && Object.keys(this.key_tableData).indexOf(element.order_item_id) !== -1 && (this.key_tableData[element.order_item_id].this_delivery_qty-element.box_num)>0){
+        if (this.is_box_data.indexOf(element.box_no) === -1 && Object.keys(this.key_tableData).indexOf(element.order_item_id) !== -1 && (this.key_tableData[element.order_item_id].this_delivery_qty - element.box_num) > 0) {
           let table_data_detail = JSON.parse(JSON.stringify(this.key_tableData[element.order_item_id]))
           table_data_detail.box_orders = element.box_id;
           table_data_detail.box_orders_show = element.box_no;
@@ -195,20 +267,25 @@ export default {
         }
       })
       this.tableData.forEach((element, index) => {
-        if (element.this_delivery_qty > 0 ){
+        if (element.this_delivery_qty > 0) {
           new_table_data.push(element)
         }
       })
       this.tableData = new_table_data;
     },
+<<<<<<< HEAD
     handelGoSure () {
 
+=======
+    handelGoSure() {
+      console.log(this.tableData)
+>>>>>>> 2baf6b15e6a037b9f129e53ff9b04b009505652e
       this.tableData.forEach((element, index) => {
         element.item_num = (index + 1)
       })
       this.data.data.send_goods_out_product = this.tableData
       let data = {
-        url:'http://121.36.142.167:7774/jbl/api/module-data/send_goods_out/send_goods_out',
+        url: 'http://121.36.142.167:7774/jbl/api/module-data/send_goods_out/send_goods_out',
         post: this.data
       }
       this.axios.post('/api/testdwy', data).then(res => {
@@ -219,15 +296,15 @@ export default {
       })
       // console.log(JSON.stringify(this.data))
     },
-    handleReturn () {
+    handleReturn() {
       localStorage.removeItem('fyy_target')
       this.$router.push('/cms/finish')
     },
-    handleChoose (item, index) {
+    handleChoose(item, index) {
       item.is_choose = !item.is_choose
       this.tableData.splice(index, 1, item)
     },
-    handleShow () {
+    handleShow() {
       this.is_show = !this.is_show
       // console.log(document.getElementsByClassName('header'))
       if (this.is_show) {
@@ -245,116 +322,359 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-  .header {
-    width: 94%;
-    height: 7rem;
-    // overflow: hidden;
-    // transition: all 0.4s;
-    position: relative;
-    top: 0.5rem;
-    left: 3%;
-    box-shadow: 0.16rem 0.1rem 0.1rem 0.1rem #9d9b9b;
-    border-radius: 1rem;
-    padding: 0.4rem 0.7rem 0 1rem;
-    background: #fff;
-  }
-  .header_btn {
-    border-radius: 1rem;
-    padding: 0.1rem;
-    width: 5rem;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
+.return_btn {
+  background-image: url('../../../assets/home/return.png');
+  background-size: 100% 100%;
+}
+
+.confirm_btn {
+  background-image: url('../../../assets/home/confirm.png');
+  background-size: 100% 100%;
+}
+
+.return_btn,
+.confirm_btn {
+  width: 10.97rem;
+  height: 3.93rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 1.06rem;
+  font-weight: 500;
+  letter-spacing: 1px;
+}
+
+.secd_flex_s>span:nth-child(1) {
+  font-size: 0.94rem;
+  color: #ABDFFF;
+}
+
+.secd_flex_s>span:nth-child(2) {
+  font-size: 0.94rem;
+  color: #03FCD3;
+}
+
+.secd_g {
+  font-size: 1rem;
+  color: #ABDFFF
+}
+
+.secd_title_d {
+  font-size: 1.13rem;
+  color: #FFFFFF;
+  text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.5);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.secd_flex_w {
+  display: flex;
+  justify-content: space-between;
+  padding-right: 1.6rem;
+  box-sizing: border-box;
+}
+
+.secd_flex {
+  display: flex;
+  flex-direction: column;
+  gap: .375rem;
+
+  .secd_title {
+    font-size: 0.88rem;
+    color: #ABDFFF;
+    opacity: 0.5;
   }
-  .header_top {
+}
+
+
+.check_box_c {
+  width: 1.19rem;
+  height: 100%;
+  background-image: url('../../../assets/home/check.png');
+  background-size: 100% 100%;
+
+}
+
+.check_box_c_active {
+  width: 1.3rem;
+  height: 100%;
+  background-image: url('../../../assets/home/checked.png');
+  background-size: 100% 100%;
+}
+
+.send_work {
+  height: 9.69rem;
+  background-image: url('../../../assets/home/packUpback.png');
+  background-size: 100% 100%;
+  margin-top: 1.38rem;
+  padding: 0.44rem 0.4rem 1.34rem 1.22rem;
+  box-sizing: border-box;
+
+  .check_box {
+    height: 1.19rem;
     display: flex;
-    justify-content: space-between;
-    align-items: center;
+    justify-content: right;
   }
-  .ot {
-    position: relative;
-    top: -1.3rem;
-  }
-  .header_middle1 {
+}
+
+.com_top {
+  margin-top: 1.72rem !important;
+}
+
+.completion_con {
+  height: 5.19rem;
+  background-image: url('../../../assets/home/completion.png');
+  background-size: 100% 100%;
+  margin-top: 0.72rem;
+  padding: 1rem 1.28rem;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.home_con_s {
+  position: relative;
+
+  .pack_up {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 5.56rem;
+    background-image: url('../../../assets/home/packUp.png');
+    background-size: 100% 100%;
+    height: 1.97rem;
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    .ft {
-      font-size: 1.5rem;
-      width: 5rem;
-      text-align: center;
+    justify-content: center;
+
+    img {
+      width: 2.59rem;
+      height: 0.88rem;
     }
+
+
+
   }
-  .header_middle {
-    position: relative;
-    top: -0.3rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  /deep/ .btn-group > .btn,
-  .btn-group-vertical > .btn {
-    background: #ffffff;
-    color: #2c3e50;
-    outline: none;
-    border: none;
-    margin: 0;
-    z-index: 3;
+
+  .pack_up_d {
+    top: -1.1rem;
   }
-  .header_footer {
-    position: relative;
-    top: -1.7rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    div {
-      font-size: 0.5rem;
-      color: rgb(244, 136, 42);
+
+  .pack_up_con {
+    height: 14.09rem;
+    background-image: url('../../../assets/home/packUpback.png');
+    background-size: 100% 100%;
+    padding: 1.78rem 2.03rem;
+    box-sizing: border-box;
+
+    .pack_up_name {
+      height: 1.25rem;
+      font-size: 1.25rem;
+      color: #fff;
+      font-weight: 600;
     }
-  }
-  .bdy {
-    width: 94%;
-    height: calc(100% - 18.7rem);
-    overflow: auto;
-    position: relative;
-    top: 1rem;
-    left: 3%;
-  }
 
-  /deep/td {
-    text-align: center;
-    vertical-align: middle;
-  }
-  table {
-    border-collapse: collapse; /* 合并边框 */
-    width: 100%; /* 表格宽度 */
-    background: #fff;
-    table-layout: fixed;
-  }
-  th {
-    font-size: 0.6rem;
-    background: #66b1f4;
-    color: #fff;
-  }
-  td {
-    font-size: 0.6rem;
-    word-break: break-all;
+    .pack_up_grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      row-gap: .625rem;
+
+      &>div {
+        display: flex;
+        flex-direction: column;
+        row-gap: .625rem;
+
+        &>div {
+          display: flex;
+          gap: .125rem;
+
+          span:nth-child(1) {
+            font-size: 1.63rem;
+            font-family: DIN-BoldItalic, DIN;
+            font-weight: 600;
+            color: #04FFD5;
+            line-height: 1.31rem;
+            transform: skewX(-10deg);
+            text-shadow: 0px 0px 0px rgba(4, 255, 213, 0.23);
+
+          }
+
+          span:nth-child(2) {
+            font-size: 1rem;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #ABDFFF;
+          }
+        }
+
+        &>p:nth-child(1) {
+          font-size: 1rem;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #ABDFFF;
+          margin-bottom: 0px;
+        }
+      }
+    }
   }
-  td,
-  th {
-    vertical-align: middle;
+}
+
+.home_con_body {
+  width: 100%;
+  padding: 1rem;
+  box-sizing: border-box;
+}
+
+.home_header {
+  height: 3.125rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+.home_header_line {
+  width: 100%;
+  height: .0625rem;
+  background-color: #fff;
+  opacity: 0.2;
+}
+
+.header {
+  width: 94%;
+  height: 7rem;
+  // overflow: hidden;
+  // transition: all 0.4s;
+  position: relative;
+  top: 0.5rem;
+  left: 3%;
+  box-shadow: 0.16rem 0.1rem 0.1rem 0.1rem #9d9b9b;
+  border-radius: 1rem;
+  padding: 0.4rem 0.7rem 0 1rem;
+  background: #fff;
+}
+
+.header_btn {
+  border-radius: 1rem;
+  padding: 0.1rem;
+  width: 5rem;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.header_top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.ot {
+  position: relative;
+  top: -1.3rem;
+}
+
+.header_middle1 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .ft {
+    font-size: 1.5rem;
+    width: 5rem;
     text-align: center;
-    border: 0.1rem solid #dddddd; /* 单元格边框样式 */
-    padding: 0.02rem; /* 单元格内边距 */
-  }
-  .choose_item {
-    background: #c8c8c8;
   }
-  .footer {
-    display: flex;
-    justify-content: space-around;
-    width: 100%;
-    position: absolute;
-    bottom: 4.8rem;
+}
+
+.header_middle {
+  position: relative;
+  top: -0.3rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/deep/ .btn-group>.btn,
+.btn-group-vertical>.btn {
+  background: #ffffff;
+  color: #2c3e50;
+  outline: none;
+  border: none;
+  margin: 0;
+  z-index: 3;
+}
+
+.header_footer {
+  position: relative;
+  top: -1.7rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  div {
+    font-size: 0.5rem;
+    color: rgb(244, 136, 42);
   }
+}
+
+.bdy {
+  width: 94%;
+  height: calc(100% - 18.7rem);
+  overflow: auto;
+  position: relative;
+  top: 1rem;
+  left: 3%;
+}
+
+/deep/td {
+  text-align: center;
+  vertical-align: middle;
+}
+
+table {
+  border-collapse: collapse;
+  /* 合并边框 */
+  width: 100%;
+  /* 表格宽度 */
+  background: #fff;
+  table-layout: fixed;
+}
+
+th {
+  font-size: 0.6rem;
+  background: #66b1f4;
+  color: #fff;
+}
+
+td {
+  font-size: 0.6rem;
+  word-break: break-all;
+}
+
+td,
+th {
+  vertical-align: middle;
+  text-align: center;
+  border: 0.1rem solid #dddddd;
+  /* 单元格边框样式 */
+  padding: 0.02rem;
+  /* 单元格内边距 */
+}
+
+.choose_item {
+  background: #c8c8c8;
+}
+
+.footer {
+  display: flex;
+  width: 100%;
+  position: absolute;
+  bottom: 4.8rem;
+}
 </style>

src/views/page/Finish/detail.vue

@@ -1,48 +1,83 @@
 <template>
   <div>
-    <div class="header">
-      <div class="header_top">
-        <Button
-          type="primary"
-          class="header_btn"
-          ghost
-          @click="handleShow"
-          :icon="is_show ? 'ios-arrow-dropup' : 'ios-arrow-dropdown'"
-        >
-          <div style="margin-right: 0.6rem">
-            {{ is_show ? "收起" : "展开" }}
-          </div></Button
-        >
-        <div style="margin-right: 1rem; color: #66a9f0">王小伟</div>
-      </div>
-      <div class="header_middle">
-        <b-dropdown size="sm" text="Large" class="m-2" :disabled="is_use">
-          <b-dropdown-item-button>Action</b-dropdown-item-button>
-          <b-dropdown-item-button>Another action</b-dropdown-item-button>
-          <b-dropdown-item-button>Something else here</b-dropdown-item-button>
-        </b-dropdown>
-        <b-dropdown size="sm" text="Large" class="m-2" :disabled="is_use">
-          <b-dropdown-item-button>Action</b-dropdown-item-button>
-          <b-dropdown-item-button>Another action</b-dropdown-item-button>
-          <b-dropdown-item-button>Something else here</b-dropdown-item-button>
-        </b-dropdown>
-        <b-dropdown size="sm" text="Large" class="m-2" :disabled="is_use">
-          <b-dropdown-item-button>Action</b-dropdown-item-button>
-          <b-dropdown-item-button>Another action</b-dropdown-item-button>
-          <b-dropdown-item-button>Something else here</b-dropdown-item-button>
-        </b-dropdown>
-      </div>
-      <div class="header_middle1 ot">
-        <div class="ft">58 &nbsp;</div>
-        <div class="ft">12 &nbsp;</div>
-        <div class="ft">12 &nbsp;</div>
-      </div>
-      <div class="header_footer">
-        <div style="margin-left: 1rem">已完成56/10</div>
-        <div style="margin-right: 1.4rem">已完成10%</div>
+    <div style="background-image: url('../../../assets/images/bc.png');background-size: 100% 100%;">
+      <div class="home_header">扫描</div>
+      <div class="home_header_line"></div>
+      <div class="home_con_body">
+        <div class="home_con_s">
+          <div v-if="is_show" class="pack_up">
+            <img @click="handleShow" src="../../../assets/home/collect.png" alt="">
+          </div>
+          <div v-if="!is_show" :class="!is_show ? 'pack_up_d' : ''" class="pack_up" style="display: flex;gap: .3125rem;">
+            <div style="font-size: 0.88rem;
+color: #ABDFFF;">展开</div>
+            <img @click="handleShow" style="width: 0.41rem;height: 0.69rem;" src="../../../assets/home/zk.png" alt="">
+          </div>
+          <div v-if="is_show" class="pack_up_con">
+            <p class="pack_up_name">王晓伟</p>
+            <div class="pack_up_grid">
+              <div>
+                <p>人员工时</p>
+                <div><span>1245</span><span>小时</span></div>
+              </div>
+              <div>
+                <p>人员工数</p>
+                <div><span>1245</span><span>件</span></div>
+              </div>
+              <div>
+                <p>工作效率</p>
+                <div><span>1245</span><span>件/小时</span></div>
+              </div>
+              <div>
+                <p>包装件数</p>
+                <div><span>1245</span><span>件</span></div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="send_work" v-if="tableData.length > 0" v-for="(item, index) in tableData" :key="index">
+          <div class="check_box">
+            <div @click="handleChoose(item, index)" :class="item.is_choose ? 'check_box_c_active' : 'check_box_c'">
+            </div>
+          </div>
+          <div class="secd_flex">
+            <div class="secd_title">
+              <span>派工单号：</span><span> {{ item.dispatch_no }}</span>
+            </div>
+            <span class="secd_title_d">{{ item.product_title }}</span>
+            <div class="secd_g"><span>规格型号：</span><span>{{ item.size }}</span></div>
+            <div class="secd_flex_w">
+              <div class="secd_flex_s">
+                <span>已完工数：</span>
+                <span>{{ item.finished_num }}件</span>
+              </div>
+              <div class="secd_flex_s">
+                <span>未完工数：</span>
+                <span>{{ item.not_finished_num }}件</span>
+              </div>
+            </div>
+          </div>
+
+        </div>
+        <div v-if="tableData.length == 0"
+          style="display: flex;width: 100%;height: 10rem;justify-content: center;align-items: center;">
+
+          <Spin size="small" />
+          <Spin />
+          <Spin size="small" />
+
+        </div>
+        <div class="footer">
+
+          <div class="return_btn" @click="handleReturn">返回</div>
+          <div class="confirm_btn" @click="handelGoSure">确认</div>
+        </div>
       </div>
     </div>
-    <div class="bdy">
+    <!-- -------------------------- -->
+
+    <!-- <div class="bdy">
       <table>
         <tr style="height: 2rem">
           <th style="width: 3rem">派工单号</th>
@@ -51,51 +86,32 @@
           <th style="width: 3rem">已完工数量</th>
           <th style="width: 3rem">未完工数量</th>
         </tr>
-        <tr
-          v-for="(item, index) in tableData"
-          :key="index"
-          @click="handleChoose(item, index)"
-          :class="item.is_choose ? 'choose_item' : ''"
-        >
+        <tr v-for="(item, index) in tableData" :key="index" @click="handleChoose(item, index)"
+          :class="item.is_choose ? 'choose_item' : ''">
           <td>
             {{ item.dispatch_no }}
           </td>
           <td>{{ item.product_title }}</td>
-          <td>{{item.size}}</td>
+          <td>{{ item.size }}</td>
           <td>{{ item.finished_num }}</td>
           <td>{{ item.not_finished_num }}</td>
         </tr>
       </table>
-    </div>
-    <div class="footer">
-      <Button
-        type="primary"
-        class="header_btn"
-        style="margin-right: 3rem; height: 2.6rem"
-        @click="handleReturn"
-      >
-        返回</Button
-      >
-      <Button
-        type="primary"
-        class="header_btn"
-        style="margin-left: 3rem; height: 2.6rem"
-        @click="handelGoSure"
-      >
-        确认</Button
-      >
-    </div>
+    </div> -->
+
   </div>
 </template>
 <script>
 export default {
-  data () {
+  data() {
     return {
       tableData: [],
       is_show: true,
-      is_use: false
+      is_use: false,
+      spinShow: false
     }
   },
+<<<<<<< HEAD
   created () {
   },
   mounted () {
@@ -108,19 +124,28 @@ export default {
         text.push(this.func.hexToString(v))
       })
     }
+=======
+  mounted() {
+    // if (localStorage.getItem('fyy_target')) {
+    //   data.target = JSON.parse(localStorage.getItem('fyy_target'))
+    // }
+>>>>>>> 2baf6b15e6a037b9f129e53ff9b04b009505652e
     this.tableData = []
     // const fyyTarget = ('PG2023081000025,PG2023081000024').split(',')
     text.forEach(v => {
       const data = {
         url: 'http://121.36.142.167:7774/jbl/api/module-data/dispatch_orders/page',
-        post: {"direction":"DESC","property":"id","fromClientType":"pc","number":0,"sorts":[],"rules":[{"field":"dispatch_orders.dispatch_no","option":"LIKE_ANYWHERE","values":[v]},{"field":"product_no","option":"LIKE_ANYWHERE","values":["BC030101000001"]}],"size":15,"specialConditions":[],"workflowSearchBean":{},"dynamicFormCode":"dispatch_orders","dynamicFormTable":null,"ignoreField":true,"developmentSystemId":null,"debugFlag":true}
+        post: { "direction": "DESC", "property": "id", "fromClientType": "pc", "number": 0, "sorts": [], "rules": [{ "field": "dispatch_orders.dispatch_no", "option": "LIKE_ANYWHERE", "values": [v] }, { "field": "product_no", "option": "LIKE_ANYWHERE", "values": ["BC030101000001"] }], "size": 15, "specialConditions": [], "workflowSearchBean": {}, "dynamicFormCode": "dispatch_orders", "dynamicFormTable": null, "ignoreField": true, "developmentSystemId": null, "debugFlag": true }
       }
       this.initData(data)
     })
   },
   methods: {
-    initData (row) {
+    initData(row) {
+
       this.axios.post('/api/testdwy', { ...row }).then(res => {
+
+
         res.data.content.forEach(v => {
           v.is_choose = false
           v.dispatch_no = v.dispatch_orders.dispatch_no
@@ -129,7 +154,7 @@ export default {
         this.tableData.push(...res.data.content)
       })
     },
-    handelGoSure () {
+    handelGoSure() {
       if (this.tableData.filter(v => v.is_choose).length === 0) {
         return this.$Message.warning('请先选择数据！')
       }
@@ -139,15 +164,15 @@ export default {
       localStorage.setItem(dataId + '', text)
       this.$router.push({ path: '/cms/finish/detailed', query: { id: dataId } })
     },
-    handleReturn () {
+    handleReturn() {
       localStorage.removeItem('fyy_target')
       this.$router.push('/cms/home')
     },
-    handleChoose (item, index) {
+    handleChoose(item, index) {
       item.is_choose = !item.is_choose
-      this.tableData.splice(index, 1, item)
+      // this.tableData.splice(index, 1, item)
     },
-    handleShow () {
+    handleShow() {
       this.is_show = !this.is_show
       console.log(document.getElementsByClassName('header'))
       if (this.is_show) {
@@ -165,6 +190,230 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.return_btn {
+  background-image: url('../../../assets/home/return.png');
+  background-size: 100% 100%;
+}
+
+.confirm_btn {
+  background-image: url('../../../assets/home/confirm.png');
+  background-size: 100% 100%;
+}
+
+.return_btn,
+.confirm_btn {
+  width: 10.97rem;
+  height: 3.93rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 1.06rem;
+  font-weight: 500;
+  letter-spacing: 1px;
+}
+
+.secd_flex_s>span:nth-child(1) {
+  font-size: 0.94rem;
+  color: #ABDFFF;
+}
+
+.secd_flex_s>span:nth-child(2) {
+  font-size: 0.94rem;
+  color: #03FCD3;
+}
+
+.secd_g {
+  font-size: 1rem;
+  color: #ABDFFF
+}
+
+.secd_title_d {
+  font-size: 1.13rem;
+  color: #FFFFFF;
+  text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.5);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.secd_flex_w {
+  display: flex;
+  justify-content: space-between;
+  padding-right: 1.6rem;
+  box-sizing: border-box;
+}
+
+.secd_flex {
+  display: flex;
+  flex-direction: column;
+  gap: .375rem;
+
+  .secd_title {
+    font-size: 0.88rem;
+    color: #ABDFFF;
+    opacity: 0.5;
+  }
+}
+
+
+.check_box_c {
+  width: 1.19rem;
+  height: 100%;
+  background-image: url('../../../assets/home/check.png');
+  background-size: 100% 100%;
+
+}
+
+.check_box_c_active {
+  width: 1.3rem;
+  height: 100%;
+  background-image: url('../../../assets/home/checked.png');
+  background-size: 100% 100%;
+}
+
+.send_work {
+  height: 9.69rem;
+  background-image: url('../../../assets/home/packUpback.png');
+  background-size: 100% 100%;
+  margin-top: 1.38rem;
+  padding: 0.44rem 0.4rem 1.34rem 1.22rem;
+  box-sizing: border-box;
+
+  .check_box {
+    height: 1.19rem;
+    display: flex;
+    justify-content: right;
+  }
+}
+
+.com_top {
+  margin-top: 1.72rem !important;
+}
+
+.completion_con {
+  height: 5.19rem;
+  background-image: url('../../../assets/home/completion.png');
+  background-size: 100% 100%;
+  margin-top: 0.72rem;
+  padding: 1rem 1.28rem;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.home_con_s {
+  position: relative;
+
+  .pack_up {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 5.56rem;
+    background-image: url('../../../assets/home/packUp.png');
+    background-size: 100% 100%;
+    height: 1.97rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img {
+      width: 2.59rem;
+      height: 0.88rem;
+    }
+
+
+
+  }
+
+  .pack_up_d {
+    top: -1.1rem;
+  }
+
+  .pack_up_con {
+    height: 14.09rem;
+    background-image: url('../../../assets/home/packUpback.png');
+    background-size: 100% 100%;
+    padding: 1.78rem 2.03rem;
+    box-sizing: border-box;
+
+    .pack_up_name {
+      height: 1.25rem;
+      font-size: 1.25rem;
+      color: #fff;
+      font-weight: 600;
+    }
+
+    .pack_up_grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      row-gap: .625rem;
+
+      &>div {
+        display: flex;
+        flex-direction: column;
+        row-gap: .625rem;
+
+        &>div {
+          display: flex;
+          gap: .125rem;
+
+          span:nth-child(1) {
+            font-size: 1.63rem;
+            font-family: DIN-BoldItalic, DIN;
+            font-weight: 600;
+            color: #04FFD5;
+            line-height: 1.31rem;
+            transform: skewX(-10deg);
+            text-shadow: 0px 0px 0px rgba(4, 255, 213, 0.23);
+
+          }
+
+          span:nth-child(2) {
+            font-size: 1rem;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #ABDFFF;
+          }
+        }
+
+        &>p:nth-child(1) {
+          font-size: 1rem;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #ABDFFF;
+          margin-bottom: 0px;
+        }
+      }
+    }
+  }
+}
+
+.home_con_body {
+  width: 100%;
+  padding: 1rem;
+  box-sizing: border-box;
+}
+
+.home_header {
+  height: 3.125rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+.home_header_line {
+  width: 100%;
+  height: .0625rem;
+  background-color: #fff;
+  opacity: 0.2;
+}
+
 .header {
   width: 94%;
   height: 7rem;
@@ -178,6 +427,7 @@ export default {
   padding: 0.4rem 0.7rem 0 1rem;
   background: #fff;
 }
+
 .header_btn {
   border-radius: 1rem;
   padding: 0.1rem;
@@ -186,25 +436,30 @@ export default {
   justify-content: space-around;
   align-items: center;
 }
+
 .header_top {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
+
 .ot {
   position: relative;
   top: -1.3rem;
 }
+
 .header_middle1 {
   display: flex;
   justify-content: space-between;
   align-items: center;
+
   .ft {
     font-size: 1.5rem;
     width: 5rem;
     text-align: center;
   }
 }
+
 .header_middle {
   position: relative;
   top: -0.3rem;
@@ -212,8 +467,9 @@ export default {
   justify-content: space-between;
   align-items: center;
 }
-/deep/ .btn-group > .btn,
-.btn-group-vertical > .btn {
+
+/deep/ .btn-group>.btn,
+.btn-group-vertical>.btn {
   background: #ffffff;
   color: #2c3e50;
   outline: none;
@@ -221,17 +477,20 @@ export default {
   margin: 0;
   z-index: 3;
 }
+
 .header_footer {
-  position: relative;
+  position: absolute;
   top: -1.7rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
+
   div {
     font-size: 0.5rem;
     color: rgb(244, 136, 42);
   }
 }
+
 .bdy {
   width: 94%;
   height: calc(100% - 18.7rem);
@@ -245,36 +504,49 @@ export default {
   text-align: center;
   vertical-align: middle;
 }
+
 table {
-  border-collapse: collapse; /* 合并边框 */
-  width: 100%; /* 表格宽度 */
+  border-collapse: collapse;
+  /* 合并边框 */
+  width: 100%;
+  /* 表格宽度 */
   background: #fff;
   table-layout: fixed;
 }
+
 th {
   font-size: 0.6rem;
   background: #66b1f4;
   color: #fff;
 }
+
 td {
   font-size: 0.6rem;
   word-break: break-all;
 }
+
 td,
 th {
   vertical-align: middle;
   text-align: center;
-  border: 0.1rem solid #dddddd; /* 单元格边框样式 */
-  padding: 0.02rem; /* 单元格内边距 */
+  border: 0.1rem solid #dddddd;
+  /* 单元格边框样式 */
+  padding: 0.02rem;
+  /* 单元格内边距 */
 }
+
 .choose_item {
   background: #c8c8c8;
 }
+
 .footer {
   display: flex;
   justify-content: space-around;
-  width: 100%;
   position: absolute;
+  width: 100%;
+  padding: 0 .55rem;
+  box-sizing: border-box;
+  left: 0;
   bottom: 4.8rem;
 }
 </style>

src/views/page/Finish/detailed.vue

@@ -1,179 +1,91 @@
 <template>
-  <div>
-    <div class="content">
-      <div v-for="(item, index) in list" :key="index" class="item">
-        <div class="unit" style="display: flex">
-          <label style="width: 40%">派工单号：</label>
-          <div style="width: 60%;word-break: break-all">{{ item.dispatch_order_no}}</div>
-        </div>
-        <div style="display: flex" class="unit">
-          <label style="width: 40%">产品名称：</label>
-          <div style="width: 60%">{{ item.product_title }}</div>
-        </div>
-        <div style="display: flex" class="unit">
-          <label>数量：</label>
-          <Input
-            size="small"
-            placeholder="请输入"
-            style="width: 70%; padding: 0 0 0 0.2rem"
-            v-model="item.finished_num"
-            type="number"
-            @on-change="handleChangeNumber($event,index)"
-          />
-        </div>
-        <div class="unit">
-          <label>班组：</label>
-          <b-form-select
-            v-model="item.team_finish_id"
-            :options="teamList"
-            style="
-              height: 1.4rem;
-              width: 70%;
-              border: 0.1rem solid;
-              border-radius: 0.6rem;
-              background: #fff;
-            "
-            @change="(e)=>handleChangeTeam(e,index)"
-          >
-<!--            @change="handleChooseTeam"-->
-            <template v-slot:first>
-              <b-form-select-option value="" disabled
-                >请选择班组</b-form-select-option
-              >
-            </template></b-form-select
-          >
-        </div>
-        <div class="unit">
-          <label>人员：</label>
-          <Select
-              v-model="item.employee_id"
-              style="
-              width: 70%;
-              background: #fff;
-            "
-              size='small'
-              transfer
-              multiple
-              @on-change="handleChangeEmployee($event,index)"
-          >
-            <Option v-for="item in employeeList" :key="item.id" :label="item.text" :value="item.value"/>
-          </Select>
-        </div>
+  <div style="  overflow-y: scroll;padding-bottom: 5rem;">
+    <div style="background-image: url('../../../assets/images/bc.png');background-size: 100% 100%;">
+      <div class="home_header">完工</div>
+      <div class="home_header_line"></div>
+      <div class="home_con_body">
 
-        <div class="unit">
-          <label>设备：</label>
-          <b-form-select
-            v-model="item.equipment_id"
-            :options="equipmentList"
-            style="
-              height: 1.4rem;
-              width: 70%;
-              border: 0.1rem solid;
-              border-radius: 0.6rem;
-              background: #fff;
-            "
-            @change="(e) => handleChangeEquipment(e,index)"
-          >
-            <template v-slot:first>
-              <b-form-select-option value="" disabled
-                >请选择设备</b-form-select-option
-              >
-            </template></b-form-select
-          >
-        </div>
-        <div
-          v-for="(_item, _index) in item.break"
-          :key="_index"
-          style="display: flex; align-items: center"
-        >
-          <div style="width: 35%; padding: 0 0.5rem 1rem 0.5rem">
-            <label>不良品原因：</label>
-            <b-form-select
-              v-model="_item.break_id"
-              :options="breakList"
-              style="
-                height: 1.4rem;
-                width: 100%;
-                border: 0.1rem solid;
-                border-radius: 0.6rem;
-                background: #fff;
-              "
-            >
-              <template v-slot:first>
-                <b-form-select-option value="" disabled
-                  >请选择原因</b-form-select-option
-                >
-              </template></b-form-select
-            >
-          </div>
-          <div style="width: 35%; padding: 0 0.5rem 1rem 0.5rem">
-            <label>不良品数量：</label>
-            <Input
-              style="width: 100%"
-              size="small"
-              placeholder="请输入"
-              v-model="_item.break_num"
-              type="number"
-            />
+        <div class="send_work" v-for="(item, index) in list" :key="index">
+          <div class="check_box">
+            <div @click="handleChoose(item, index)" class="check_box_c">
+            </div>
           </div>
-          <div style="width: 30%; display: flex">
-            <div class="boo" @click="handleBreakAdd(_index, item, index)">
-              +
+
+          <div class="secd_flex">
+            <div class="secd_title">
+              <span>派工单号：</span><span>{{ item.dispatch_order_no }}</span>
+            </div>
+            <span class="secd_title_d">{{ item.product_title }}</span>
+            <div style="height: 1px;background-color: #fff;opacity: 0.3;"></div>
+            <div style="display: flex;flex-direction: column;gap: 1rem;margin-top: 1rem;">
+              <div class="secd_input">
+                <div class="secd_input_l">数量：</div>
+                <div class="secd_input_r">
+                  <input type="text" v-model="item.finished_num" @on-change="handleChangeNumber($event, index)"
+                    placeholder="请输入数量">
+                </div>
+              </div>
+              <div class="secd_input">
+                <div class="secd_input_l">班组：</div>
+                <div class="secd_input_r">
+                  <b-form-select id="input-3" v-model="item.team_finish_id" :options="teamList" class="inp select_list"
+                    required placeholder="请选择站点" @change="(e) => handleChangeTeam(e, index)"></b-form-select>
+
+                </div>
+              </div>
+              <div class="secd_input">
+                <div class="secd_input_l">人员：</div>
+                <div class="secd_input_r">
+                  <b-form-select id="input-3" :options="employeeList" v-model="item.employee_id" class="inp select_list"
+                    required placeholder="请选择站点" @on-change="handleChangeEmployee($event, index)"></b-form-select>
+                </div>
+              </div>
+              <div class="secd_input">
+                <div class="secd_input_l">设备：</div>
+                <div class="secd_input_r">
+                  <b-form-select id="input-3" v-model="item.equipment_id" :options="equipmentList" class="inp select_list"
+                    required placeholder="请选择站点" @change="(e) => handleChangeEquipment(e, index)"></b-form-select>
+                </div>
+              </div>
+            </div>
+            <div style="height: 1px;background-color: #fff;opacity: 0.3;margin-top: .8rem;margin-bottom: .8rem;"></div>
+            <div class="defective_products">
+              <div>不良品</div>
+              <div style="display: flex;align-items: center;gap: .625rem;">
+                <img @click="handleBreakAdd(_index, item, index)" src="../../../assets/home/j.png" alt="">
+                <img @click="handleBreakCancel(_index, item, index)" src="../../../assets/home/z.png" alt="">
+              </div>
+            </div>
+            <div v-for="(_item, _index) in item.break" :key="_index"
+              style="display: flex;flex-direction: column;gap: 1rem;margin-top: .5rem;">
+              <div class="secd_input">
+                <div class="secd_input_l">不良品原因：</div>
+                <div class="secd_input_r">
+                  <b-form-select id="input-3" v-model="_item.break_id" :options="breakList" class="inp select_list"
+                    required placeholder="请选择站点"></b-form-select>
+                </div>
+              </div>
+              <div class="secd_input">
+                <div class="secd_input_l">不良品数量：</div>
+                <div class="secd_input_r">
+                  <input type="text" placeholder="请输入数量" v-model="_item.break_num">
+                </div>
+              </div>
             </div>
-            <div class="boo" @click="handleBreakCancel(_index, item, index)">
-              -</div>
           </div>
         </div>
-      </div>
-      <div class="footer_btn">
-        <b-button
-          variant="primary"
-          style="width: 35%; margin-left: 3%"
-          @click="handleReturn"
-          >返回</b-button
-        >
-        <b-button
-          variant="primary"
-          style="width: 35%; margin-right: 3%"
-          @click="handleSure"
-          >确认</b-button
-        >
-      </div>
-    </div>
-    <!-- <div class="footer">
-      <div>总计：</div>
-      <div class="footer_content">
-        <div>
-          <label>派工单号：</label>
-          <div>123456</div>
-        </div>
-        <div>
-          <label>产品名称：</label>
-          <div>实木板</div>
-        </div>
-        <div>
-          <label>数量：</label>
-          <div>23</div>
-        </div>
-        <div>
-          <label>班组：</label>
-          <div>一班</div>
-        </div>
-        <div>
-          <label>人员：</label>
-          <div>张三</div>
-        </div>
-        <div>
-          <label>设备：</label>
-          <div>一号机</div>
+        <div class="footer">
+          <div class="return_btn" @click="handleReturn">返回</div>
+          <div class="confirm_btn" @click="handleSure">确认</div>
         </div>
       </div>
-    </div> -->
+    </div>
+
   </div>
 </template>
 <script>
 export default {
-  data () {
+  data() {
     return {
       list: [],
       name: '',
@@ -185,11 +97,11 @@ export default {
       breakList: []
     }
   },
-  created () {
+  created() {
     // 获取不良品原因
     const data2 = {
       url: 'http://121.36.142.167:7774/jbl/api/module-data/defective_list/page',
-      post: {"direction":"DESC","property":"id","fromClientType":"pc","number":0,"sorts":[],"rules":[],"size":15,"specialConditions":[],"dynamicFormCode":"defective","developmentSystemId":null,"debugFlag":true}
+      post: { "direction": "DESC", "property": "id", "fromClientType": "pc", "number": 0, "sorts": [], "rules": [], "size": 15, "specialConditions": [], "dynamicFormCode": "defective", "developmentSystemId": null, "debugFlag": true }
     }
     this.axios.post('/api/testdwy', { ...data2 }).then(res => {
       this.breakList = res.data.content.filter(v => v.status)
@@ -201,7 +113,7 @@ export default {
     // 获取设备
     const data1 = {
       url: 'http://121.36.142.167:7774/jbl/api/module-data/device_list/page',
-      post: {"direction":"DESC","property":"id","fromClientType":"pc","number":0,"sorts":[],"rules":[],"size":15,"specialConditions":[],"dynamicFormCode":"device","developmentSystemId":null,"debugFlag":true}
+      post: { "direction": "DESC", "property": "id", "fromClientType": "pc", "number": 0, "sorts": [], "rules": [], "size": 15, "specialConditions": [], "dynamicFormCode": "device", "developmentSystemId": null, "debugFlag": true }
     }
     this.axios.post('/api/testdwy', { ...data1 }).then(res => {
       this.equipmentList = res.data.content.filter(v => v.status)
@@ -213,7 +125,7 @@ export default {
     // 获取班组
     const data = {
       url: 'http://121.36.142.167:7774/jbl/api/module-data/team_list/page',
-      post: {"direction":"DESC","property":"id","fromClientType":"pc","number":0,"sorts":[],"rules":[],"size":15,"specialConditions":[],"dynamicFormCode":"team","developmentSystemId":null,"debugFlag":true}
+      post: { "direction": "DESC", "property": "id", "fromClientType": "pc", "number": 0, "sorts": [], "rules": [], "size": 15, "specialConditions": [], "dynamicFormCode": "team", "developmentSystemId": null, "debugFlag": true }
     }
     this.axios.post('/api/testdwy', { ...data }).then(res => {
       this.teamList = res.data.content.filter(v => v.status)
@@ -225,7 +137,7 @@ export default {
     // 获取人员
     const data3 = {
       url: 'http://121.36.142.167:7774/jbl/api/module-data/team_code_btn/page',
-      post: {"direction":"DESC","property":"id","fromClientType":"pc","number":0,"sorts":[],"rules":[],"size":15,"specialConditions":[],"workflowSearchBean":{},"dynamicFormCode":"person","dynamicFormTable":null,"ignoreField":true,"developmentSystemId":null,"debugFlag":true}
+      post: { "direction": "DESC", "property": "id", "fromClientType": "pc", "number": 0, "sorts": [], "rules": [], "size": 15, "specialConditions": [], "workflowSearchBean": {}, "dynamicFormCode": "person", "dynamicFormTable": null, "ignoreField": true, "developmentSystemId": null, "debugFlag": true }
     }
     this.axios.post('/api/testdwy', { ...data3 }).then(res => {
       this.employeeList = res.data.content
@@ -235,11 +147,11 @@ export default {
       })
     })
   },
-  beforeRouteLeave (to, from, next) {
+  beforeRouteLeave(to, from, next) {
     localStorage.removeItem(this.$route.query.id + '')
     next()
   },
-  beforeRouteEnter (to, from, next) {
+  beforeRouteEnter(to, from, next) {
     if (localStorage.getItem(to.query.id)) {
       next()
     } else {
@@ -249,25 +161,25 @@ export default {
       })
     }
   },
-  mounted () {
+  mounted() {
     const id = this.$route.query.id
     this.initData(id)
   },
   methods: {
-    handleChangeNumber (e, index) {
+    handleChangeNumber(e, index) {
       this.list[index].not_finished_num = this.list[index].dispatch_num - (e.target.value * 1)
     },
-    handleChangeEmployee (e, index) {
+    handleChangeEmployee(e, index) {
       this.list[index].employee_id_show = this.employeeList.filter(v => e.indexOf(v.no) !== -1).map(v => v.name).toString().replace(/,/g, '/$/$/$').replace(/\//g, '')
       console.log(this.list[index])
     },
-    handleChangeTeam (e, index) {
+    handleChangeTeam(e, index) {
       this.list[index].team_id_show = this.teamList.find(v => v.team_code === e).title
     },
-    handleChangeEquipment (e, index) {
+    handleChangeEquipment(e, index) {
       this.list[index].equipment_id_show = this.equipmentList.find(v => v.device_code === e).title
     },
-    initData (id) {
+    initData(id) {
       this.list = JSON.parse(localStorage.getItem(id + ''))
       this.list.forEach(v => {
         v.team_finish_id = v.dispatch_orders.team_id
@@ -284,14 +196,14 @@ export default {
         ]
       })
     },
-    handleBreakAdd (_index, item, index) {
+    handleBreakAdd(_index, item, index) {
       item.break.splice(_index + 1, 0, {
         break_id: '',
         break_num: 0
       })
       this.list.splice(index, 1, item)
     },
-    handleBreakCancel (_index, item, index) {
+    handleBreakCancel(_index, item, index) {
       if (_index === 0) {
         item.break = [{ break_id: '', break_num: 0 }]
       } else {
@@ -299,7 +211,7 @@ export default {
       }
       this.list.splice(index, 1, item)
     },
-    handleReturn () {
+    handleReturn() {
       localStorage.removeItem(this.$route.query.id + '')
       this.$router.go(-1)
     },
@@ -323,7 +235,7 @@ export default {
     //     this.formData.employee_id = []
     //   }
     // },
-    handleSure () {
+    handleSure() {
       // console.log(this.list);return false;
       this.list.forEach((v,index) => {
         const data3 = {
@@ -356,14 +268,31 @@ export default {
             }
           }
         }
+<<<<<<< HEAD
         const data4Dtil = []
         v.break.forEach(vv => {
           if (vv.break_id && vv.break_num) {
             v.defective_num = vv.break_num
             v.defective_remark = vv.break_id
             data4Dtil.push(v)
+=======
+        // this.axios.post('/api/testdwy', { ...data3 }).then(res => {
+        // if (res.code == 200) {
+        // this.$Message.success(res.msg)
+        // // this.$router.push('/cms/home')
+        // }
+        // })
+
+        const data4Dtil = [];
+        v.break.forEach(vv => {
+          if (vv.break_id && vv.break_num) {
+            v.defective_num = vv.break_num;
+            v.defective_remark = vv.break_id;
+            data4Dtil.push(v);
+>>>>>>> 2baf6b15e6a037b9f129e53ff9b04b009505652e
           }
         })
+<<<<<<< HEAD
         this.axios.post('/api/testdwy', { ...data3 }).then(res => {
           if (res.code === 200) {
             if (data4Dtil.length > 0) {
@@ -409,19 +338,362 @@ export default {
               if(index==this.list.length-1){
                 this.$Message.success(res.msg)
                 this.$router.push('/cms/home')
+=======
+        if (data4Dtil.length > 0) {
+          const data4 = {
+            url: 'http://121.36.142.167:7774/jbl/api/module-data/defective_orders/defective_orders',
+            post: {
+              bizId: -1,
+              bizTypeEk: 'LOWCODE',
+              dynamicFormId: "474139280406949888",
+              showModelId: "474140935059877888",
+              data: {
+                defective_orders: {
+                  defective_order_no: null,
+                  defection_time: new Date(),
+                  created_by: null,
+                  created_date: null,
+                  employee_id: v.employee_id.toString(),
+                  employee_id_show: v.employee_id_show,
+                  equipment_id: v.equipment_id,
+                  equipment_id_show: v.equipment_id_show,
+                  last_modified_by: null,
+                  last_modified_date: null,
+                  process_id: v.dispatch_orders.process_id,
+                  process_id_show: v.dispatch_orders.process_id_show,
+                  site: null,
+                  team_id: v.team_finish_id,
+                  team_id_show: v.team_id_show,
+                },
+                defective_orders_dtl: data4Dtil
+>>>>>>> 2baf6b15e6a037b9f129e53ff9b04b009505652e
               }
             }
           }
+<<<<<<< HEAD
         })
     })
 
+=======
+          console.log(JSON.stringify(data4)); return false;
+          //   this.axios.post('/api/testdwy', { ...data3 }).then(res => {
+          //     if (res.code == 200) {
+          //     // this.$Message.success(res.msg)
+          //
+          //
+          //   }
+          // })
+        }
+
+      })
+    }
+>>>>>>> 2baf6b15e6a037b9f129e53ff9b04b009505652e
   }
-}}
+}
 </script>
 <style lang="scss" scoped>
+/deep/.inp {
+  background: #032a64 !important;
+  // opacity: 0.4;
+  border: none;
+  color: #fff;
+}
+
+::-webkit-input-placeholder {
+  color: #ffffff84;
+  /* 设置占位符文字的颜色 */
+}
+
+.defective_products {
+  display: flex;
+  justify-content: space-between;
+  color: #fff;
+
+  &>div {
+    img {
+      width: 1.2rem;
+      height: 1.2rem;
+    }
+  }
+
+}
+
+.secd_input {
+  display: flex;
+  height: 2.06rem;
+  font-size: 1rem;
+  color: #FFFFFF;
+
+  .secd_input_l {
+    display: flex;
+    align-items: center;
+    width: fit-content;
+    height: 100%;
+  }
+
+  .secd_input_r {
+    flex: 1;
+
+    input {
+      width: 100%;
+      height: 100%;
+      border-radius: 0.38rem;
+      border: 0.03rem solid #76CFFF;
+      background-color: #00000000;
+      outline: none;
+      padding: 0 .625rem;
+      box-sizing: border-box;
+      color: #fff;
+
+
+    }
+  }
+
+}
+
+.select_list {
+  border-radius: 0.38rem;
+  border: 0.03rem solid #76CFFF;
+  background-color: #00000000;
+  outline: none;
+  padding: 0 .625rem;
+  box-sizing: border-box;
+  color: #fff;
+  width: 100%;
+  height: 100%;
+  font-weight: 500;
+  letter-spacing: 0.1rem;
+}
+
+.return_btn {
+  background-image: url('../../../assets/home/return.png');
+  background-size: 100% 100%;
+}
+
+.confirm_btn {
+  background-image: url('../../../assets/home/confirm.png');
+  background-size: 100% 100%;
+}
+
+.return_btn,
+.confirm_btn {
+  width: 10.97rem;
+  height: 3.93rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 1.06rem;
+  font-weight: 500;
+  letter-spacing: 1px;
+}
+
+.secd_flex_s>span:nth-child(1) {
+  font-size: 0.94rem;
+  color: #ABDFFF;
+}
+
+.secd_flex_s>span:nth-child(2) {
+  font-size: 0.94rem;
+  color: #03FCD3;
+}
+
+.secd_g {
+  font-size: 1rem;
+  color: #ABDFFF
+}
+
+.secd_title_d {
+  font-size: 1.13rem;
+  color: #FFFFFF;
+  text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.5);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.secd_flex_w {
+  display: flex;
+  justify-content: space-between;
+  padding-right: 1.6rem;
+  box-sizing: border-box;
+}
+
+.secd_flex {
+  display: flex;
+  flex-direction: column;
+  gap: .375rem;
+
+  .secd_title {
+    font-size: 0.88rem;
+    color: #ABDFFF;
+    opacity: 0.5;
+  }
+}
+
+
+.check_box_c {
+  width: 1.19rem;
+  height: 100%;
+  background-image: url('../../../assets/home/check.png');
+  background-size: 100% 100%;
+
+}
+
+.check_box_c_active {
+  width: 1.3rem;
+  height: 100%;
+  background-image: url('../../../assets/home/checked.png');
+  background-size: 100% 100%;
+}
+
+.send_work {
+  background-image: url('../../../assets/home/packUpback.png');
+  background-size: 100% 100%;
+  margin-top: 1.38rem;
+  padding: 0.44rem 0.4rem 1.34rem 1.22rem;
+  box-sizing: border-box;
+
+  .check_box {
+    height: 1.19rem;
+    display: flex;
+    justify-content: right;
+  }
+}
+
+.com_top {
+  margin-top: 1.72rem !important;
+}
+
+.completion_con {
+  height: 5.19rem;
+  background-image: url('../../../assets/home/completion.png');
+  background-size: 100% 100%;
+  margin-top: 0.72rem;
+  padding: 1rem 1.28rem;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.home_con_s {
+  position: relative;
+
+  .pack_up {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 5.56rem;
+    background-image: url('../../../assets/home/packUp.png');
+    background-size: 100% 100%;
+    height: 1.97rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img {
+      width: 2.59rem;
+      height: 0.88rem;
+    }
+
+
+
+  }
+
+  .pack_up_d {
+    top: -1.1rem;
+  }
+
+  .pack_up_con {
+    height: 14.09rem;
+    background-image: url('../../../assets/home/packUpback.png');
+    background-size: 100% 100%;
+    padding: 1.78rem 2.03rem;
+    box-sizing: border-box;
+
+    .pack_up_name {
+      height: 1.25rem;
+      font-size: 1.25rem;
+      color: #fff;
+      font-weight: 600;
+    }
+
+    .pack_up_grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      row-gap: .625rem;
+
+      &>div {
+        display: flex;
+        flex-direction: column;
+        row-gap: .625rem;
+
+        &>div {
+          display: flex;
+          gap: .125rem;
+
+          span:nth-child(1) {
+            font-size: 1.63rem;
+            font-family: DIN-BoldItalic, DIN;
+            font-weight: 600;
+            color: #04FFD5;
+            line-height: 1.31rem;
+            transform: skewX(-10deg);
+            text-shadow: 0px 0px 0px rgba(4, 255, 213, 0.23);
+
+          }
+
+          span:nth-child(2) {
+            font-size: 1rem;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #ABDFFF;
+          }
+        }
+
+        &>p:nth-child(1) {
+          font-size: 1rem;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #ABDFFF;
+          margin-bottom: 0px;
+        }
+      }
+    }
+  }
+}
+
+.home_con_body {
+  width: 100%;
+  padding: 1rem;
+  padding-top: 0px;
+  box-sizing: border-box;
+
+}
+
+.home_header {
+  height: 3.125rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+.home_header_line {
+  width: 100%;
+  height: .0625rem;
+  background-color: #fff;
+  opacity: 0.2;
+}
+
 .content {
   height: calc(100% - 5rem);
   overflow: auto;
+
   .item {
     width: 94%;
     position: relative;
@@ -433,6 +705,7 @@ export default {
     font-size: 0.8rem;
     display: flex;
     flex-wrap: wrap;
+
     .add {
       position: absolute;
       width: 1.5rem;
@@ -447,6 +720,7 @@ export default {
       box-shadow: 0.1rem 0.1rem 0.1rem 0rem #777676;
       background: #fff;
     }
+
     .delete {
       width: 1.5rem;
       height: 1.5rem;
@@ -461,11 +735,13 @@ export default {
       box-shadow: 0.1rem 0.1rem 0.1rem 0rem #777676;
       background: #fff;
     }
+
     .unit {
       width: 50%;
       padding: 0.5rem;
       display: flex;
       align-items: center;
+
       label {
         width: 30%;
         text-align: right;
@@ -473,11 +749,19 @@ export default {
     }
   }
 }
+
 .footer_btn {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
+
+.footer {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 2rem;
+}
+
 .boo {
   font-size: 2rem;
   border-radius: 50%;
@@ -489,5 +773,4 @@ export default {
   margin: 0.5rem;
   border: 0.1rem solid;
 }
-
 </style>

src/views/page/Home.vue

@@ -1,86 +1,111 @@
 <template>
-  <div>
-    <div class="header">
-      <div class="header_top">
-        <Button
-          type="primary"
-          class="header_btn"
-          ghost
-          @click="handleShow"
-          :icon="is_show ? 'ios-arrow-dropup' : 'ios-arrow-dropdown'"
-        >
-          <div style="margin-right: 0.6rem">
-            {{ is_show ? "收起" : "展开" }}
-          </div></Button
-        >
-        <div style="margin-right: 1rem; color: #66a9f0">王小伟</div>
-      </div>
-      <div class="header_middle">
-        <b-dropdown size="sm" text="Large" class="m-2" :disabled="is_use">
-          <b-dropdown-item-button>Action</b-dropdown-item-button>
-          <b-dropdown-item-button>Another action</b-dropdown-item-button>
-          <b-dropdown-item-button>Something else here</b-dropdown-item-button>
-        </b-dropdown>
-        <b-dropdown size="sm" text="Large" class="m-2" :disabled="is_use">
-          <b-dropdown-item-button>Action</b-dropdown-item-button>
-          <b-dropdown-item-button>Another action</b-dropdown-item-button>
-          <b-dropdown-item-button>Something else here</b-dropdown-item-button>
-        </b-dropdown>
-        <b-dropdown size="sm" text="Large" class="m-2" :disabled="is_use">
-          <b-dropdown-item-button>Action</b-dropdown-item-button>
-          <b-dropdown-item-button>Another action</b-dropdown-item-button>
-          <b-dropdown-item-button>Something else here</b-dropdown-item-button>
-        </b-dropdown>
+  <div style="background-image: url('../../assets/images/bc.png');background-size: 100% 100%;">
+    <div class="home_header">扫描</div>
+    <div class="home_header_line"></div>
+    <div class="home_con_body">
+      <div class="home_con_s">
+        <div v-if="is_show" class="pack_up">
+          <img @click="handleShow" src="../../assets/home/collect.png" alt="">
+        </div>
+        <div v-if="!is_show" :class="!is_show ? 'pack_up_d' : ''" class="pack_up" style="display: flex;gap: .3125rem;">
+          <div style="font-size: 0.88rem;
+color: #ABDFFF;">展开</div>
+          <img @click="handleShow" style="width: 0.41rem;height: 0.69rem;" src="../../assets/home/zk.png" alt="">
+        </div>
+        <div v-if="is_show" class="pack_up_con">
+          <p class="pack_up_name">王晓伟</p>
+          <div class="pack_up_grid">
+            <div>
+              <p>人员工时</p>
+              <div><span>1245</span><span>小时</span></div>
+            </div>
+            <div>
+              <p>人员工数</p>
+              <div><span>1245</span><span>件</span></div>
+            </div>
+            <div>
+              <p>工作效率</p>
+              <div><span>1245</span><span>件/小时</span></div>
+            </div>
+            <div>
+              <p>包装件数</p>
+              <div><span>1245</span><span>件</span></div>
+            </div>
+          </div>
+        </div>
       </div>
-      <div class="header_middle1 ot">
-        <div class="ft">58 &nbsp;</div>
-        <div class="ft">12 &nbsp;</div>
-        <div class="ft">12 &nbsp;</div>
-      </div>
-      <div class="header_footer">
-        <div style="margin-left: 1rem">已完成56/10</div>
-        <div style="margin-right: 1.4rem">已完成10%</div>
+      <div>
+        <div :class="!is_show ? 'com_top' : ''">
+          <div class="completion_con" @click="handleFinish">
+            <div style="display: flex;align-items: center;gap: .84rem;">
+              <img style="width: 3.19rem;height: 3.19rem" src="../../assets/home/bzhome.png" alt="">
+              <p style="margin-bottom: 0;font-size: 1.13rem;color: #FFFFFF;">完工</p>
+            </div>
+            <div style="display: flex;align-items: center;">
+              <img style="width: 3.16rem; height: 2rem;" src="../../assets/home/bzhomer.png" alt="">
+
+            </div>
+          </div>
+          <div class="completion_con" @click="handleDispatch">
+            <div style="display: flex;align-items: center;gap: .84rem;">
+              <img style="width: 3.19rem;height: 3.19rem" src="../../assets/home/bzhomefha.png" alt="">
+              <p style="margin-bottom: 0;font-size: 1.13rem;color: #FFFFFF;">发货</p>
+            </div>
+            <div style="display: flex;align-items: center;">
+              <img style="width: 3.16rem; height: 2rem;" src="../../assets/home/bzhomer.png" alt="">
+
+            </div>
+          </div>
+          <div class="completion_con" @click="handlePackage">
+            <div style="display: flex;align-items: center;gap: .84rem;">
+              <img style="width: 3.19rem;height: 3.19rem" src="../../assets/home/bzhomebz.png" alt="">
+              <p style="margin-bottom: 0;font-size: 1.13rem;color: #FFFFFF;">包装</p>
+            </div>
+            <div style="display: flex;align-items: center;">
+              <img style="width: 3.16rem; height: 2rem;" src="../../assets/home/bzhomer.png" alt="">
+
+            </div>
+          </div>
+        </div>
       </div>
-    </div>
-    <div class="bdy">
-      <div class="item" @click="handleFinish">
-        <svg
-          t="1688029854983"
-          class="icon"
-          viewBox="0 0 1024 1024"
-          version="1.1"
-          xmlns="http://www.w3.org/2000/svg"
-          p-id="9681"
-          width="130"
-          height="130"
-        >
-          <path
-            d="M713.728 415.936l-47.722667-42.794667 85.482667-85.482666-45.248-45.248-87.957333 87.936-47.701334-42.794667 90.389334-90.389333a64 64 0 0 1 90.517333 0l45.248 45.226666a64 64 0 0 1 0 90.538667l-83.008 82.986667zM505.6 624.064L283.861333 845.802667a64 64 0 0 1-90.517333 0l-45.248-45.248a64 64 0 0 1 0-90.517334l235.456-235.456-58.282667-71.424a64 64 0 0 1 4.266667-85.76l99.136-99.114666c23.253333-23.253333 64.832-20.608 90.282667 0.213333l338.133333 265.28c30.4 30.4 21.909333 110.826667-61.866667 194.581333-83.477333 83.498667-164.181333 92.245333-194.581333 61.866667-0.597333-0.597333-32.277333-39.317333-95.04-116.16z m-81.365333-99.669333L193.344 755.306667l45.248 45.226666 226.325333-226.304-40.682666-49.834666z m55.210666-255.530667l-1.024-0.832a12.629333 12.629333 0 0 0-6.826666-2.176l-96.789334 96.789333c105.088 128.746667 249.088 305.002667 268.821334 329.472 4.288 0.426667 10.624-0.085333 18.496-2.133333 25.429333-6.506667 56.405333-25.408 87.850666-56.874667 31.573333-31.573333 50.496-62.528 56.981334-87.893333 1.92-7.466667 2.474667-13.504 2.133333-17.749333L479.445333 268.864z"
-            fill="#5499fe"
-            p-id="9682"
-          ></path>
-        </svg>
-        <div class="ft_by">完工</div>
-      </div>
-      <div class="item" @click="handleDispatch">
-        <svg
-          t="1688030012912"
-          class="icon"
-          viewBox="0 0 1024 1024"
-          version="1.1"
-          xmlns="http://www.w3.org/2000/svg"
-          p-id="10881"
-          width="130"
-          height="130"
-        >
-          <path
-            d="M968.9 351.8l-57.5-52.2c-31-28.1-71.1-43.6-112.9-43.6L640 256l0-80.5c0-62-50.5-112.5-112.5-112.5l-415 0c-62 0-112.5 50.5-112.5 112.5l0 720.5 128 0c0 70.6 57.4 128 128 128s128-57.4 128-128l192 0 64 0c0 70.6 57.4 128 128 128s128-57.4 128-128l128 0L1024 476.2C1024 428.9 1003.9 383.6 968.9 351.8zM925.9 399.2c21.7 19.7 34.1 47.7 34.1 77l0 99.8-128 0L832 325.5c13.3 4.5 25.7 11.8 36.4 21.5L925.9 399.2zM256 960c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64S291.3 960 256 960zM576 832 366.8 832c-22.2-38.2-63.5-64-110.8-64s-88.7 25.8-110.8 64L64 832l0-656.5c0-26.7 21.8-48.5 48.5-48.5l415 0c26.7 0 48.5 21.8 48.5 48.5l0 80.5L576 832zM768 960c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64S803.3 960 768 960zM878.8 832c-22.2-38.2-63.5-64-110.8-64s-88.7 25.8-110.8 64L640 832l0-512 128 0 0 320 192 0 0 192L878.8 832z"
-            p-id="10882"
-            fill="#d57952"
-          ></path>
-        </svg>
-        <div class="ft_by">发货</div>
+      <!-- <div class="header">
+        <div class="header_top">
+          <Button type="primary" class="header_btn" ghost @click="handleShow"
+            :icon="is_show ? 'ios-arrow-dropup' : 'ios-arrow-dropdown'">
+            <div style="margin-right: 0.6rem">
+              {{ is_show ? "收起" : "展开" }}
+            </div>
+          </Button>
+          <div style="margin-right: 1rem; color: #66a9f0">王小伟</div>
+        </div>
+        <div class="header_middle">
+          <b-dropdown size="sm" text="Large" class="m-2" :disabled="is_use">
+            <b-dropdown-item-button>Action</b-dropdown-item-button>
+            <b-dropdown-item-button>Another action</b-dropdown-item-button>
+            <b-dropdown-item-button>Something else here</b-dropdown-item-button>
+          </b-dropdown>
+          <b-dropdown size="sm" text="Large" class="m-2" :disabled="is_use">
+            <b-dropdown-item-button>Action</b-dropdown-item-button>
+            <b-dropdown-item-button>Another action</b-dropdown-item-button>
+            <b-dropdown-item-button>Something else here</b-dropdown-item-button>
+          </b-dropdown>
+          <b-dropdown size="sm" text="Large" class="m-2" :disabled="is_use">
+            <b-dropdown-item-button>Action</b-dropdown-item-button>
+            <b-dropdown-item-button>Another action</b-dropdown-item-button>
+            <b-dropdown-item-button>Something else here</b-dropdown-item-button>
+          </b-dropdown>
+        </div>
+        <div class="header_middle1 ot">
+          <div class="ft">58 &nbsp;</div>
+          <div class="ft">12 &nbsp;</div>
+          <div class="ft">12 &nbsp;</div>
+        </div>
+        <div class="header_footer">
+          <div style="margin-left: 1rem">已完成56/10</div>
+          <div style="margin-right: 1.4rem">已完成10%</div>
+        </div>
       </div>
+<<<<<<< HEAD
        <div class="item" @click="handleInventory">
         <svg
           t="1688030140909"
@@ -125,22 +150,65 @@
         </svg>
         <div class="ft_by">包装</div>
       </div>
+=======
+      <div class="bdy">
+        <div class="item" @click="handleFinish">
+          <svg t="1688029854983" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+            p-id="9681" width="130" height="130">
+            <path
+              d="M713.728 415.936l-47.722667-42.794667 85.482667-85.482666-45.248-45.248-87.957333 87.936-47.701334-42.794667 90.389334-90.389333a64 64 0 0 1 90.517333 0l45.248 45.226666a64 64 0 0 1 0 90.538667l-83.008 82.986667zM505.6 624.064L283.861333 845.802667a64 64 0 0 1-90.517333 0l-45.248-45.248a64 64 0 0 1 0-90.517334l235.456-235.456-58.282667-71.424a64 64 0 0 1 4.266667-85.76l99.136-99.114666c23.253333-23.253333 64.832-20.608 90.282667 0.213333l338.133333 265.28c30.4 30.4 21.909333 110.826667-61.866667 194.581333-83.477333 83.498667-164.181333 92.245333-194.581333 61.866667-0.597333-0.597333-32.277333-39.317333-95.04-116.16z m-81.365333-99.669333L193.344 755.306667l45.248 45.226666 226.325333-226.304-40.682666-49.834666z m55.210666-255.530667l-1.024-0.832a12.629333 12.629333 0 0 0-6.826666-2.176l-96.789334 96.789333c105.088 128.746667 249.088 305.002667 268.821334 329.472 4.288 0.426667 10.624-0.085333 18.496-2.133333 25.429333-6.506667 56.405333-25.408 87.850666-56.874667 31.573333-31.573333 50.496-62.528 56.981334-87.893333 1.92-7.466667 2.474667-13.504 2.133333-17.749333L479.445333 268.864z"
+              fill="#5499fe" p-id="9682"></path>
+          </svg>
+          <div class="ft_by">完工</div>
+        </div>
+        <div class="item" @click="handleDispatch">
+          <svg t="1688030012912" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+            p-id="10881" width="130" height="130">
+            <path
+              d="M968.9 351.8l-57.5-52.2c-31-28.1-71.1-43.6-112.9-43.6L640 256l0-80.5c0-62-50.5-112.5-112.5-112.5l-415 0c-62 0-112.5 50.5-112.5 112.5l0 720.5 128 0c0 70.6 57.4 128 128 128s128-57.4 128-128l192 0 64 0c0 70.6 57.4 128 128 128s128-57.4 128-128l128 0L1024 476.2C1024 428.9 1003.9 383.6 968.9 351.8zM925.9 399.2c21.7 19.7 34.1 47.7 34.1 77l0 99.8-128 0L832 325.5c13.3 4.5 25.7 11.8 36.4 21.5L925.9 399.2zM256 960c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64S291.3 960 256 960zM576 832 366.8 832c-22.2-38.2-63.5-64-110.8-64s-88.7 25.8-110.8 64L64 832l0-656.5c0-26.7 21.8-48.5 48.5-48.5l415 0c26.7 0 48.5 21.8 48.5 48.5l0 80.5L576 832zM768 960c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64S803.3 960 768 960zM878.8 832c-22.2-38.2-63.5-64-110.8-64s-88.7 25.8-110.8 64L640 832l0-512 128 0 0 320 192 0 0 192L878.8 832z"
+              p-id="10882" fill="#d57952"></path>
+          </svg>
+          <div class="ft_by">发货</div>
+        </div>
+        <div class="item">
+          <svg t="1688030140909" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+            p-id="12365" width="130" height="130">
+            <path
+              d="M908.31 487.83l-363.3-371.72c-24.92-25.5-65.43-25.5-90.35 0l-3.51 3.6c-21.42 21.91-24.42 55.58-9.03 80.8L337.49 307.58c-7.84 8.02-7.84 21.08 0 29.1 3.92 4.02 9.04 6.06 14.17 6.06 5.13 0 10.25-1.95 14.27-5.96l103.46-105.95 189.89 194.48v176.55c0 28.04 19.63 51.5 45.54 56.85l-191.16 195.6c-19.9 20.36-46.33 31.57-74.47 31.57s-54.57-11.21-74.47-31.57l-177.88-182c-41.1-41.95-41.1-110.33 0-152.4l11.86-12.13c7.83-8.03 7.83-21.08 0-29.1a19.816 19.816 0 0 0-28.44 0l-11.86 12.13c-56.78 58.1-56.78 152.49 0 210.59l177.88 182.01c27.53 28.08 64.01 43.6 102.91 43.6s75.37-15.42 102.91-43.6l189.34-193.73v4.01c0 16.86 6.33 32.6 17.99 44.52 11.56 11.82 27.04 18.41 43.52 18.41 16.49 0 31.86-6.59 43.52-18.41 11.55-11.93 17.99-27.76 17.99-44.52V602.9c18.19 1.43 36.68-5.04 50.35-19.03l3.52-3.6c24.9-25.5 24.9-66.93-0.02-92.44z m-28.54 63.34l-3.52 3.6c-8.14 8.33-20.91 9.46-30.35 2.67-6.13-4.42-14.17-4.93-20.8-1.43a20.816 20.816 0 0 0-10.86 18.3v119.38c0 5.87-2.21 11.31-6.23 15.43-4.02 4.11-9.35 6.38-15.08 6.38s-11.05-2.26-15.08-6.48c-4.02-4.11-6.23-9.57-6.23-15.42V641c0.03-0.69 0.03-1.37 0-2.06v-27.81c0-10.28-7.54-19.03-17.59-20.36-10.05-1.33-19.49 5.24-22.01 15.22-0.7 2.88-2.2 5.56-4.32 7.71-3.11 3.19-7.24 4.94-11.66 4.94-9.04 0-16.48-7.51-16.48-16.86v-185.1c0-5.45-2.11-10.59-5.93-14.49L484.62 188.3c-0.32-0.38-0.65-0.77-1-1.13-0.35-0.36-0.73-0.69-1.1-1.02l-2.92-2.99c-9.24-9.46-9.24-24.88 0-34.34l3.52-3.6a23.402 23.402 0 0 1 33.57 0l363.09 371.62c9.23 9.45 9.23 24.88-0.01 34.33z m-380.38-120.4c11.15 0 20.1-9.25 20.1-20.56 0-11.31-9.04-20.57-20.1-20.57H117.11c-11.06 0-20.11 9.25-20.11 20.57 0 11.31 9.05 20.56 20.11 20.56h382.28z"
+              fill="#a8a343" p-id="12366"></path>
+          </svg>
+          <div class="ft_by">返工</div>
+        </div>
+        <div class="item" @click="handlePackage">
+          <svg t="1688182715452" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+            p-id="2523" id="mx_n_1688182715453" width="130" height="130">
+            <path
+              d="M913.28 231.296L549.28 14.208a72.544 72.544 0 0 0-74.56-0.032L110.72 231.296a73.024 73.024 0 0 0-35.488 62.432v436.544a73.056 73.056 0 0 0 35.488 62.464l364.032 217.12a72.704 72.704 0 0 0 74.496 0l364.032-217.12a73.024 73.024 0 0 0 35.488-62.464V293.728a73.056 73.056 0 0 0-35.488-62.432zM507.52 69.12a8.736 8.736 0 0 1 8.96 0l343.36 204.8-143.04 82.592-344.096-206.944z m1.92 407.104L161.696 275.424l148.672-88.672 343.104 206.336zM143.52 737.76a8.768 8.768 0 0 1-4.256-7.488V336.384l340.48 196.576v405.344z m737.024 0L543.68 938.624V530.368L884.8 333.44v396.832a8.736 8.736 0 0 1-4.256 7.488z"
+              fill="#58b125" p-id="2524"></path>
+            <path d="M767.072 483.04l-95.744 55.296a32 32 0 0 0 32 55.424l95.744-55.296a32 32 0 1 0-32-55.424z"
+              fill="#58b125" p-id="2525"></path>
+          </svg>
+          <div class="ft_by">包装</div>
+        </div>
+      </div> -->
+>>>>>>> 2baf6b15e6a037b9f129e53ff9b04b009505652e
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  data () {
+  data() {
     return {
       is_show: true,
       is_use: false
     }
   },
-  mounted () {
+  mounted() {
     console.log(123)
   },
   methods: {
+<<<<<<< HEAD
     handleInventory () {
       this.$router.push('/cms/inventory/index')
     },
@@ -149,11 +217,18 @@ export default {
     },
     handlePackage () {
       this.$router.push('/cms/Package/index')
+=======
+    handleFinish() {
+      this.$router.push('/cms/finish/detail')
+    },
+    handlePackage() {
+      this.$router.push('/cms/Package/detail')
+>>>>>>> 2baf6b15e6a037b9f129e53ff9b04b009505652e
     },
-    handleDispatch () {
+    handleDispatch() {
       this.$router.push('/cms/finish')
     },
-    handleShow () {
+    handleShow() {
       this.is_show = !this.is_show
       console.log(document.getElementsByClassName('header'))
       if (this.is_show) {
@@ -171,6 +246,133 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.com_top {
+  margin-top: 1.72rem !important;
+}
+
+.completion_con {
+  height: 5.19rem;
+  background-image: url('../../assets/home/completion.png');
+  background-size: 100% 100%;
+  margin-top: 0.72rem;
+  padding: 1rem 1.28rem;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.home_con_s {
+  position: relative;
+
+  .pack_up {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 5.56rem;
+    background-image: url('../../assets/home/packUp.png');
+    background-size: 100% 100%;
+    height: 1.97rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img {
+      width: 2.59rem;
+      height: 0.88rem;
+    }
+
+
+
+  }
+
+  .pack_up_d {
+    top: -1.1rem;
+  }
+
+  .pack_up_con {
+    height: 14.09rem;
+    background-image: url('../../assets/home/packUpback.png');
+    background-size: 100% 100%;
+    padding: 1.78rem 2.03rem;
+    box-sizing: border-box;
+
+    .pack_up_name {
+      height: 1.25rem;
+      font-size: 1.25rem;
+      color: #fff;
+      font-weight: 600;
+    }
+
+    .pack_up_grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      row-gap: .625rem;
+
+      &>div {
+        display: flex;
+        flex-direction: column;
+        row-gap: .625rem;
+
+        &>div {
+          display: flex;
+          gap: .125rem;
+
+          span:nth-child(1) {
+            font-size: 1.63rem;
+            font-family: DIN-BoldItalic, DIN;
+            font-weight: 600;
+            color: #04FFD5;
+            line-height: 1.31rem;
+            transform: skewX(-10deg);
+            text-shadow: 0px 0px 0px rgba(4, 255, 213, 0.23);
+
+          }
+
+          span:nth-child(2) {
+            font-size: 1rem;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #ABDFFF;
+          }
+        }
+
+        &>p:nth-child(1) {
+          font-size: 1rem;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #ABDFFF;
+          margin-bottom: 0px;
+        }
+      }
+    }
+  }
+}
+
+.home_con_body {
+  width: 100%;
+  padding: 1rem;
+  box-sizing: border-box;
+}
+
+.home_header {
+  height: 3.125rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+.home_header_line {
+  width: 100%;
+  height: .0625rem;
+  background-color: #fff;
+  opacity: 0.2;
+}
+
 .header {
   width: 94%;
   height: 7rem;
@@ -184,6 +386,7 @@ export default {
   padding: 0.4rem 0.7rem 0 1rem;
   background: #fff;
 }
+
 .header_btn {
   border-radius: 1rem;
   padding: 0.1rem;
@@ -192,25 +395,30 @@ export default {
   justify-content: space-around;
   align-items: center;
 }
+
 .header_top {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
+
 .ot {
   position: relative;
   top: -1.3rem;
 }
+
 .header_middle1 {
   display: flex;
   justify-content: space-between;
   align-items: center;
+
   .ft {
     font-size: 1.5rem;
     width: 5rem;
     text-align: center;
   }
 }
+
 .header_middle {
   position: relative;
   top: -0.3rem;
@@ -218,8 +426,9 @@ export default {
   justify-content: space-between;
   align-items: center;
 }
-/deep/ .btn-group > .btn,
-.btn-group-vertical > .btn {
+
+/deep/ .btn-group>.btn,
+.btn-group-vertical>.btn {
   background: #ffffff;
   color: #2c3e50;
   outline: none;
@@ -227,17 +436,20 @@ export default {
   margin: 0;
   z-index: 3;
 }
+
 .header_footer {
   position: relative;
   top: -1.7rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
+
   div {
     font-size: 0.5rem;
     color: rgb(244, 136, 42);
   }
 }
+
 .bdy {
   display: flex;
   flex-wrap: wrap;
@@ -246,6 +458,7 @@ export default {
   top: 1.4rem;
   left: 3%;
   height: 24rem;
+
   .item {
     width: 46%;
     margin: 2%;
@@ -256,6 +469,7 @@ export default {
     box-shadow: 0.16rem 0.1rem 0.1rem 0.1rem #9d9b9b;
   }
 }
+
 .ft_by {
   position: relative;
   top: 0.5rem;

src/views/page/Mine.vue

@@ -1,251 +1,96 @@
 <template>
-  <div>
-    <div class="main_header">
-      <div class="header">
-        <div class="img_content">
-          <img src="../../assets/FG-01C.png" alt="" />
-        </div>
-        <div class="info_content">
-          <div>王小伟</div>
-          <div style="font-size: 0.9rem; margin-top: 0.5rem">
-            <svg
-              t="1688184922513"
-              class="icon"
-              viewBox="0 0 1024 1024"
-              version="1.1"
-              xmlns="http://www.w3.org/2000/svg"
-              p-id="5827"
-              width="20"
-              height="20"
-            >
-              <path
-                d="M512 552.128c-140.352 0-254.528-114.176-254.528-254.528S371.648 43.136 512 43.136c140.288 0 254.528 114.176 254.528 254.528S652.288 552.128 512 552.128z m0-444.992c-105.024 0-190.528 85.44-190.528 190.528S406.976 488.128 512 488.128c105.088 0 190.528-85.44 190.528-190.528S617.088 107.136 512 107.136zM525.376 980.864a32.064 32.064 0 0 1-25.216-12.224L424.96 872.512a32.32 32.32 0 0 1-6.464-24.704l31.68-204.032a32 32 0 0 1 31.616-27.072h79.232a32 32 0 0 1 31.616 27.136l31.68 204.032a32 32 0 0 1-5.44 23.232l-67.264 96.128a32.128 32.128 0 0 1-25.344 13.632h-0.896z m-41.472-136.896l40.064 51.2 35.136-50.176-25.472-164.224h-24.384l-25.344 163.2z"
-                fill="#515151"
-                p-id="5828"
-              ></path>
-              <path
-                d="M957.824 972.288a32 32 0 0 1-31.872-35.328 416.064 416.064 0 0 0-279.872-436.544 31.872 31.872 0 0 1-20.032-40.512 31.872 31.872 0 0 1 40.64-19.968 479.936 479.936 0 0 1 322.88 503.744 31.936 31.936 0 0 1-31.744 28.608zM66.24 972.288a32 32 0 0 1-31.808-28.672 480.512 480.512 0 0 1 322.688-503.68 32 32 0 0 1 20.608 60.544 416 416 0 0 0-279.616 436.416 32 32 0 0 1-31.872 35.392z"
-                fill="#515151"
-                p-id="5829"
-              ></path>
-            </svg>
-            管理员
+  <div style="  overflow-y: scroll;padding-bottom: 5rem;">
+    <div style="background-image: url('../../assets/images/bc.png');background-size: 100% 100%;">
+      <div class="home_header">个人中心</div>
+      <div class="home_header_line"></div>
+      <div class="home_con_body">
+        <div class="main_header">
+          <div class="header">
+            <div class="img_content">
+              <img src="../../assets/home/userimg.png" style="width: 100%;height: 100%;" alt="" />
+            </div>
+            <div class="info_content">
+              <div>王小伟</div>
+              <div style="font-size: 0.9rem; margin-top: 0.5rem;text-align: center;color: #ABDFFF;">
+                管理员
+              </div>
+            </div>
           </div>
         </div>
+
+
       </div>
     </div>
-    <!-- 工厂包装 -->
-    <div class="item">
-      <div class="item_icon">
-        <svg
-          t="1688186942415"
-          class="icon"
-          viewBox="0 0 1024 1024"
-          version="1.1"
-          xmlns="http://www.w3.org/2000/svg"
-          p-id="10776"
-          width="36"
-          height="36"
-        >
-          <path
-            d="M598.381714 165.546667v689.444571h50.907429v-0.975238h117.443047V448.853333l-117.443047-41.350095v-77.507048l165.229714 58.148572c14.60419 9.48419 23.844571 25.185524 25.185524 42.374095l0.170667 4.33981-0.024381 420.10819h55.905523v73.142857H134.095238v-73.142857h55.612952V295.570286c0-19.21219 9.898667-37.059048 26.209524-47.274667l297.20381-130.023619c37.10781-23.186286 85.26019 3.486476 85.26019 47.250286z m-73.142857 27.257904l-262.387809 114.785524v546.401524h262.387809V548.717714l-0.487619 0.219429v-33.840762l0.487619 1.145905V375.466667l-0.487619 0.219428v-33.743238l0.487619 1.121524V192.804571zM475.672381 490.105905v79.11619l-163.157333 67.388953v-79.140572l163.157333-67.364571z m0-172.982857v79.457523l-163.157333 69.436953v-79.481905l163.157333-69.412571z"
-            p-id="10777"
-            fill="#515151"
-          ></path>
-        </svg>
-      </div>
-      <div class="item_title">
-        工厂类型
-        <svg
-          t="1688183626202"
-          class="icon"
-          viewBox="0 0 1024 1024"
-          version="1.1"
-          xmlns="http://www.w3.org/2000/svg"
-          p-id="3994"
-          width="25"
-          height="25"
-        >
-          <path
-            d="M384.32 797.512a30.088 30.088 0 0 1-21.288-51.392L597.144 512 363.032 277.816a30.088 30.088 0 0 1 0-42.568 30.088 30.088 0 0 1 42.568 0l255.392 255.464a30.088 30.088 0 0 1 0 42.568L405.6 788.696a30.04 30.04 0 0 1-21.28 8.816z"
-            fill="#888888"
-            p-id="3995"
-          ></path>
-        </svg>
-      </div>
-    </div>
-    <div class="item" style="margin-bottom: 0.5rem">
-      <div class="item_icon">
-        <svg
-          t="1688183455900"
-          class="icon"
-          viewBox="0 0 1024 1024"
-          version="1.1"
-          xmlns="http://www.w3.org/2000/svg"
-          p-id="2856"
-          width="36"
-          height="36"
-        >
-          <path
-            d="M913.28 231.296L549.28 14.208a72.544 72.544 0 0 0-74.56-0.032L110.72 231.296a73.024 73.024 0 0 0-35.488 62.432v436.544a73.056 73.056 0 0 0 35.488 62.464l364.032 217.12a72.704 72.704 0 0 0 74.496 0l364.032-217.12a73.024 73.024 0 0 0 35.488-62.464V293.728a73.056 73.056 0 0 0-35.488-62.432zM507.52 69.12a8.736 8.736 0 0 1 8.96 0l343.36 204.8-143.04 82.592-344.096-206.944z m1.92 407.104L161.696 275.424l148.672-88.672 343.104 206.336zM143.52 737.76a8.768 8.768 0 0 1-4.256-7.488V336.384l340.48 196.576v405.344z m737.024 0L543.68 938.624V530.368L884.8 333.44v396.832a8.736 8.736 0 0 1-4.256 7.488z"
-            fill="#575869"
-            p-id="2857"
-          ></path>
-          <path
-            d="M767.072 483.04l-95.744 55.296a32 32 0 0 0 32 55.424l95.744-55.296a32 32 0 1 0-32-55.424z"
-            fill="#575869"
-            p-id="2858"
-          ></path>
-        </svg>
-      </div>
-      <div class="item_title" style="border: none">
-        包装列表
-        <svg
-          t="1688183626202"
-          class="icon"
-          viewBox="0 0 1024 1024"
-          version="1.1"
-          xmlns="http://www.w3.org/2000/svg"
-          p-id="3994"
-          width="25"
-          height="25"
-        >
-          <path
-            d="M384.32 797.512a30.088 30.088 0 0 1-21.288-51.392L597.144 512 363.032 277.816a30.088 30.088 0 0 1 0-42.568 30.088 30.088 0 0 1 42.568 0l255.392 255.464a30.088 30.088 0 0 1 0 42.568L405.6 788.696a30.04 30.04 0 0 1-21.28 8.816z"
-            fill="#888888"
-            p-id="3995"
-          ></path>
-        </svg>
-      </div>
-    </div>
-    <!-- 运输安装 -->
-    <div class="item">
-      <div class="item_icon">
-        <svg
-          t="1688186876602"
-          class="icon"
-          viewBox="0 0 1024 1024"
-          version="1.1"
-          xmlns="http://www.w3.org/2000/svg"
-          p-id="9479"
-          width="40"
-          height="40"
-        >
-          <path
-            d="M1000.177 646.279l-23.146-136.962c-1.431-46.319-39.94-83.62-87.076-83.62H878.47L836.165 342.3c-9.888-19.522-29.717-31.627-51.74-31.627H627.043V281.88c0-31.684-25.813-57.498-57.527-57.498h-402.67c-31.714 0-57.526 25.814-57.526 57.498v57.554h57.527V281.88h402.669V655.8H421.628c-12.852-49.464-57.497-86.26-110.965-86.26s-98.118 36.796-110.968 86.26h-32.848v-86.26H109.32v143.818h90.374c12.851 49.462 57.5 86.261 110.968 86.261 53.466 0 98.113-36.799 110.965-86.261h267.015c12.864 49.462 57.526 86.261 110.98 86.261 53.453 0 98.114-36.799 110.977-86.261h32.416c17.162 0 33.341-7.501 44.38-20.563 10.93-12.893 15.566-29.86 12.782-46.516z m-689.514 95.839c-31.712 0-57.527-25.84-57.527-57.553s25.815-57.525 57.527-57.525c31.71 0 57.527 25.813 57.527 57.525s-25.816 57.553-57.527 57.553z m474.211-373.78l29.101 57.359h-71.88v-57.414l42.78 0.055z m14.75 373.78c-31.715 0-57.528-25.84-57.528-57.553s25.813-57.525 57.527-57.525c31.712 0 57.527 25.813 57.527 57.525s-25.815 57.553-57.527 57.553zM910.601 655.8c-12.864-49.465-57.524-86.262-110.979-86.262-53.453 0-98.115 36.797-110.98 86.262h-61.6V396.905l57.528 0.029v28.763c0 31.712 25.815 57.554 57.526 57.554h147.86c16.32 0 29.578 12.864 29.578 28.735L943.017 655.8h-32.415z"
-            p-id="9480"
-            fill="#515151"
-          ></path>
-          <path
-            d="M23.032 368.17h230.104v57.527H23.032z m28.763 115.081h230.103v57.498H51.795z"
-            p-id="9481"
-            fill="#515151"
-          ></path>
-        </svg>
+    <!-- ////////////////////// -->
+    <div>
+
+      <!-- 工厂包装 -->
+      <div class="item">
+        <div class="item_title">
+          工厂类型
+          <svg t="1688183626202" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+            p-id="3994" width="25" height="25">
+            <path
+              d="M384.32 797.512a30.088 30.088 0 0 1-21.288-51.392L597.144 512 363.032 277.816a30.088 30.088 0 0 1 0-42.568 30.088 30.088 0 0 1 42.568 0l255.392 255.464a30.088 30.088 0 0 1 0 42.568L405.6 788.696a30.04 30.04 0 0 1-21.28 8.816z"
+              fill="#888888" p-id="3995"></path>
+          </svg>
+        </div>
       </div>
-      <div class="item_title">
-        运输列表
-        <svg
-          t="1688183626202"
-          class="icon"
-          viewBox="0 0 1024 1024"
-          version="1.1"
-          xmlns="http://www.w3.org/2000/svg"
-          p-id="3994"
-          width="25"
-          height="25"
-        >
-          <path
-            d="M384.32 797.512a30.088 30.088 0 0 1-21.288-51.392L597.144 512 363.032 277.816a30.088 30.088 0 0 1 0-42.568 30.088 30.088 0 0 1 42.568 0l255.392 255.464a30.088 30.088 0 0 1 0 42.568L405.6 788.696a30.04 30.04 0 0 1-21.28 8.816z"
-            fill="#888888"
-            p-id="3995"
-          ></path>
-        </svg>
+      <div class="item" style="margin-bottom: 0.5rem">
+
+        <div class="item_title" style="border: none">
+          包装列表
+          <svg t="1688183626202" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+            p-id="3994" width="25" height="25">
+            <path
+              d="M384.32 797.512a30.088 30.088 0 0 1-21.288-51.392L597.144 512 363.032 277.816a30.088 30.088 0 0 1 0-42.568 30.088 30.088 0 0 1 42.568 0l255.392 255.464a30.088 30.088 0 0 1 0 42.568L405.6 788.696a30.04 30.04 0 0 1-21.28 8.816z"
+              fill="#888888" p-id="3995"></path>
+          </svg>
+        </div>
       </div>
-    </div>
-    <div class="item">
-      <div class="item_icon">
-        <svg
-          t="1688186505260"
-          class="icon"
-          viewBox="0 0 1024 1024"
-          version="1.1"
-          xmlns="http://www.w3.org/2000/svg"
-          p-id="8343"
-          width="36"
-          height="36"
-        >
-          <path
-            d="M313.6 928c-6.4 0-10.666667-2.133333-14.933333-6.4-8.533333-8.533333-8.533333-21.333333 0-29.866667l61.866666-61.866666 12.8 4.266666c134.4 55.466667 290.133333 23.466667 392.533334-78.933333 93.866667-93.866667 128-232.533333 91.733333-360.533333l-187.733333 187.733333-192-51.2L426.666667 341.333333l187.733333-187.733333c-128-38.4-266.666667-4.266667-362.666667 89.6C149.333333 345.6 117.333333 501.333333 172.8 635.733333l4.266667 12.8-61.866667 61.866667c-8.533333 8.533333-21.333333 8.533333-29.866667 0s-8.533333-21.333333 0-29.866667l42.666667-42.666666C74.666667 490.666667 110.933333 326.4 221.866667 213.333333 337.066667 98.133333 509.866667 64 661.333333 125.866667l29.866667 12.8-217.6 215.466666 38.4 145.066667 145.066667 38.4L874.666667 320l12.8 29.866667c59.733333 151.466667 25.6 322.133333-89.6 437.333333-113.066667 113.066667-277.333333 149.333333-426.666667 93.866667l-42.666667 42.666666c-4.266667 4.266667-10.666667 4.266667-14.933333 4.266667z"
-            fill="#666666"
-            p-id="8344"
-          ></path>
-        </svg>
+      <!-- 运输安装 -->
+      <div class="item">
+
+        <div class="item_title">
+          运输列表
+          <svg t="1688183626202" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+            p-id="3994" width="25" height="25">
+            <path
+              d="M384.32 797.512a30.088 30.088 0 0 1-21.288-51.392L597.144 512 363.032 277.816a30.088 30.088 0 0 1 0-42.568 30.088 30.088 0 0 1 42.568 0l255.392 255.464a30.088 30.088 0 0 1 0 42.568L405.6 788.696a30.04 30.04 0 0 1-21.28 8.816z"
+              fill="#888888" p-id="3995"></path>
+          </svg>
+        </div>
       </div>
-      <div class="item_title" style="border: none">
-        安装信息
-        <svg
-          t="1688183626202"
-          class="icon"
-          viewBox="0 0 1024 1024"
-          version="1.1"
-          xmlns="http://www.w3.org/2000/svg"
-          p-id="3994"
-          width="25"
-          height="25"
-        >
-          <path
-            d="M384.32 797.512a30.088 30.088 0 0 1-21.288-51.392L597.144 512 363.032 277.816a30.088 30.088 0 0 1 0-42.568 30.088 30.088 0 0 1 42.568 0l255.392 255.464a30.088 30.088 0 0 1 0 42.568L405.6 788.696a30.04 30.04 0 0 1-21.28 8.816z"
-            fill="#888888"
-            p-id="3995"
-          ></path>
-        </svg>
+      <div class="item">
+
+        <div class="item_title" style="border: none">
+          安装信息
+          <svg t="1688183626202" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+            p-id="3994" width="25" height="25">
+            <path
+              d="M384.32 797.512a30.088 30.088 0 0 1-21.288-51.392L597.144 512 363.032 277.816a30.088 30.088 0 0 1 0-42.568 30.088 30.088 0 0 1 42.568 0l255.392 255.464a30.088 30.088 0 0 1 0 42.568L405.6 788.696a30.04 30.04 0 0 1-21.28 8.816z"
+              fill="#888888" p-id="3995"></path>
+          </svg>
+        </div>
       </div>
-    </div>
 
-    <!-- //版本信息 -->
-    <div class="item" style="margin-top: 0.5rem">
-      <div class="item_icon">
-        <svg
-          t="1688186357382"
-          class="icon"
-          viewBox="0 0 1024 1024"
-          version="1.1"
-          xmlns="http://www.w3.org/2000/svg"
-          p-id="7252"
-          width="36"
-          height="36"
-        >
-          <path
-            d="M877.35808 696.4992a23.04 23.04 0 0 1 22.38464-40.27904l29.44 16.36352c37.7856 20.992 50.0992 67.28704 26.49088 102.58432a76.42624 76.42624 0 0 1-26.48576 24.2176l-378.33728 210.23744c-24.7296 13.7472-55.5264 13.7472-80.256 0L92.25728 799.3856c-37.7856-20.992-50.09408-67.28704-26.48576-102.58432a76.42624 76.42624 0 0 1 26.48576-24.21248l29.83424-16.57856a23.04 23.04 0 0 1 22.37952 40.27904l-29.82912 16.57856a30.38208 30.38208 0 0 0-10.56768 9.55392c-8.35072 12.48768-4.08064 28.54912 10.56768 36.68992l378.33216 210.24256c10.81344 6.00576 24.6784 6.00576 35.49184 0l378.33728-210.24256a30.38208 30.38208 0 0 0 10.56768-9.55904c8.35072-12.48768 4.08064-28.54912-10.56768-36.6848l-29.44512-16.36352z m-2.432-219.21792a23.04 23.04 0 0 1 22.37952-40.27904l31.88224 17.7152c37.78048 20.992 50.09408 67.28704 26.48576 102.58432a76.42624 76.42624 0 0 1-26.48576 24.2176l-378.33728 210.23744c-24.7296 13.74208-55.5264 13.74208-80.256 0l-378.33728-210.24256c-37.7856-20.992-50.09408-67.28704-26.48576-102.58432a76.42624 76.42624 0 0 1 26.48576-24.2176l31.98976-17.77152a23.04 23.04 0 1 1 22.38464 40.27904l-31.98976 17.77664a30.38208 30.38208 0 0 0-10.56768 9.55392c-8.35072 12.48768-4.08064 28.54912 10.56768 36.6848l378.33216 210.24256c10.81344 6.01088 24.6784 6.01088 35.49184 0l378.33728-210.24256a30.38208 30.38208 0 0 0 10.56768-9.55392c8.35072-12.48768 4.08064-28.54912-10.56768-36.6848l-31.87712-17.7152z m-350.52544-415.18592a28.16 28.16 0 0 0-27.35616 0L117.32992 273.1008a28.16 28.16 0 0 0 0 49.2288l379.71456 211.01056a28.16 28.16 0 0 0 27.35616 0l379.71456-211.01056a28.16 28.16 0 0 0 0-49.2288l-379.71456-211.00544z m402.0992 170.7264c35.84 19.9168 48.7424 65.11616 28.83072 100.95616a74.24 74.24 0 0 1-28.83072 28.83072l-379.71456 211.01056a74.24 74.24 0 0 1-72.12544 0L94.94528 362.60864c-35.84-19.9168-48.74752-65.11616-28.83072-100.95104a74.24 74.24 0 0 1 28.8256-28.83584L474.66496 21.81632a74.24 74.24 0 0 1 72.12544 0l379.71456 211.00544z"
-            fill="#515151"
-            p-id="7253"
-          ></path>
-        </svg>
+      <!-- //版本信息 -->
+      <div class="item" style="margin-top: 0.5rem">
+
+        <div class="item_title" style="border: none">
+          版本信息
+          <svg t="1688183626202" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+            p-id="3994" width="25" height="25">
+            <path
+              d="M384.32 797.512a30.088 30.088 0 0 1-21.288-51.392L597.144 512 363.032 277.816a30.088 30.088 0 0 1 0-42.568 30.088 30.088 0 0 1 42.568 0l255.392 255.464a30.088 30.088 0 0 1 0 42.568L405.6 788.696a30.04 30.04 0 0 1-21.28 8.816z"
+              fill="#888888" p-id="3995"></path>
+          </svg>
+        </div>
       </div>
-      <div class="item_title" style="border: none">
-        版本信息
-        <svg
-          t="1688183626202"
-          class="icon"
-          viewBox="0 0 1024 1024"
-          version="1.1"
-          xmlns="http://www.w3.org/2000/svg"
-          p-id="3994"
-          width="25"
-          height="25"
-        >
-          <path
-            d="M384.32 797.512a30.088 30.088 0 0 1-21.288-51.392L597.144 512 363.032 277.816a30.088 30.088 0 0 1 0-42.568 30.088 30.088 0 0 1 42.568 0l255.392 255.464a30.088 30.088 0 0 1 0 42.568L405.6 788.696a30.04 30.04 0 0 1-21.28 8.816z"
-            fill="#888888"
-            p-id="3995"
-          ></path>
-        </svg>
+      <div class="return_item" @click="handleReturn">
+        <div>退出</div>
       </div>
     </div>
-    <div class="return_item" @click="handleReturn">
-      <div>退出</div>
-    </div>
   </div>
 </template>
 <script>
@@ -264,60 +109,101 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.home_con_body {
+  width: 100%;
+  padding: 1rem;
+  padding-top: 0px;
+  box-sizing: border-box;
+
+}
+
+.home_header {
+  height: 3.125rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+.home_header_line {
+  width: 100%;
+  height: .0625rem;
+  background-color: #fff;
+  opacity: 0.2;
+}
+
 .item {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background: #fff;
+  width: 100%;
+  background-image: url('../../assets/home/gcbj.png');
+  color: #fff;
+  padding: 0 1rem;
+  box-sizing: border-box;
 }
+
 .return_item {
   text-align: center;
-  background: #fff;
+  background-image: url('../../assets/home/quit.png');
+  background-size: 100% 100%;
+  color: #fff;
+  width: 95%;
+  margin: 0 auto;
   margin-top: 1.5rem;
+  font-size: 1.06rem;
+  font-weight: 500;
+  color: #A51626;
+
   div {
     font-size: 1.2rem;
     padding: 1rem 0;
     font-weight: bold;
   }
 }
+
 .item_icon {
   width: 20%;
   text-align: center;
 }
+
 .item_title {
   font-size: 1rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  width: 80%;
-  border-bottom: 0.1rem solid #d8d5d5;
+  width: 100%;
+  padding: 0 2rem;
+  box-sizing: border-box;
   padding: 1rem 0;
 }
+
 .img_content {
-  width: 5rem;
+  width: 6.3rem;
   border-radius: 50%;
-
+  height: 6.56rem;
   overflow: hidden;
   margin: 1.5rem;
-  img {
-    max-height: 5rem;
-    max-width: 5rem;
-  }
 }
+
 .info_content {
-  width: 70%;
   div {
-    font-size: 1.8rem;
+    font-size: 1.25rem;
     font-weight: bold;
   }
 }
+
 .main_header {
-  background: #fff;
+  background: #ffffff00;
   margin-bottom: 2rem;
 }
+
 .header {
   display: flex;
-  justify-content: space-between;
+  color: #fff;
+  flex-direction: column;
   align-items: center;
 }
 </style>

src/views/page/Package/detail.vue

@@ -1,45 +1,113 @@
 <template>
-  <div>
+  <div style="overflow-y: scroll;padding-bottom: 9rem;box-sizing: border-box;">
+    <div style="background-image: url('../../../assets/images/bc.png');background-size: 100% 100%;">
+      <div class="home_header">包装</div>
+      <div class="home_header_line"></div>
+      <div class="home_con_body">
+        <div class="home_con_s">
+          <div v-if="is_show" class="pack_up">
+            <img @click="handleShow" src="../../../assets/home/collect.png" alt="">
+          </div>
+          <div v-if="!is_show" :class="!is_show ? 'pack_up_d' : ''" class="pack_up" style="display: flex;gap: .3125rem;">
+            <div style="font-size: 0.88rem;
+color: #ABDFFF;">展开</div>
+            <img @click="handleShow" style="width: 0.41rem;height: 0.69rem;" src="../../../assets/home/zk.png" alt="">
+          </div>
+          <div v-if="is_show" class="pack_up_con">
+            <p class="pack_up_name">王晓伟</p>
+            <div class="pack_up_grid">
+              <div>
+                <p>产品数</p>
+                <div><span>{{ this.product_total }}</span><span>件</span></div>
+              </div>
+              <div>
+                <p>已包数</p>
+                <div><span>{{ this.box_num }}</span><span>件</span></div>
+              </div>
+              <div>
+                <p>未包数</p>
+                <div><span>{{ this.product_total - this.box_num }}</span><span>件</span></div>
+              </div>
+              <!-- <div>
+                <p>包装件数</p>
+                <div><span>1245</span><span>件</span></div>
+              </div> -->
+            </div>
+          </div>
+        </div>
+
+        <div class="send_work" v-if="tableData.length > 0" v-for="(item, index) in tableData" :key="index">
+          <div class="check_box">
+            <div @click="handleChoose(item, index)" :class="item.is_choose ? 'check_box_c_active' : 'check_box_c'">
+            </div>
+          </div>
+          <div class="secd_flex">
+            <div class="secd_title">
+              <span>产品名称：</span><span> {{ item.bus_no }}</span>
+            </div>
+            <span class="secd_title_d">{{ item.product_title }}</span>
+            <div class="secd_g"><span>规格型号：</span><span>{{ item.product_size }}</span></div>
+            <div class="secd_flex_w">
+              <div class="secd_flex_s">
+                <span>花色：</span>
+                <span>{{ item.out_qty }}件</span>
+              </div>
+              <div class="secd_flex_s">
+                <span>已包装数量：</span>
+                <span>{{ item.this_delivery_qty - item.out_qty }}件</span>
+              </div>
+            </div>
+          </div>
+
+        </div>
+        <div v-if="tableData.length == 0"
+          style="display: flex;width: 100%;height: 10rem;justify-content: center;align-items: center;">
+
+          <Spin size="small" />
+          <Spin />
+          <Spin size="small" />
+
+        </div>
+        <div class="footer">
+
+          <div class="return_btn" @click="handleReturn">返回</div>
+          <div class="confirm_btn" @click="handelGoSure">确认</div>
+        </div>
+      </div>
+    </div>
+
+
+  </div>
+  <!-- /////////////// -->
+  <!-- <div>
     <div class="header">
       <div class="header_top">
-        <Button
-            type="primary"
-            class="header_btn"
-            ghost
-            @click="handleShow"
-            :icon="is_show ? 'ios-arrow-dropup' : 'ios-arrow-dropdown'"
-        >
+        <Button type="primary" class="header_btn" ghost @click="handleShow"
+          :icon="is_show ? 'ios-arrow-dropup' : 'ios-arrow-dropdown'">
           <div style="margin-right: 0.6rem">
             {{ is_show ? "收起" : "展开" }}
-          </div></Button
-        >
+          </div>
+        </Button>
         <div style="margin-right: 1rem; color: #66a9f0">王小伟</div>
       </div>
       <div class="header_middle">
         <b-dropdown size="sm" text="产品数" class="m-2" :disabled="is_use">
-          <!--<b-dropdown-item-button>Action</b-dropdown-item-button>-->
-          <!--<b-dropdown-item-button>Another action</b-dropdown-item-button>-->
-          <!--<b-dropdown-item-button>Something else here</b-dropdown-item-button>-->
+         
         </b-dropdown>
         <b-dropdown size="sm" text="已包数" class="m-2" :disabled="is_use">
-          <!--<b-dropdown-item-button>Action</b-dropdown-item-button>-->
-          <!--<b-dropdown-item-button>Another action</b-dropdown-item-button>-->
-          <!--<b-dropdown-item-button>Something else here</b-dropdown-item-button>-->
+         
         </b-dropdown>
         <b-dropdown size="sm" text="未包数" class="m-2" :disabled="is_use">
-          <!--<b-dropdown-item-button>Action</b-dropdown-item-button>-->
-          <!--<b-dropdown-item-button>Another action</b-dropdown-item-button>-->
-          <!--<b-dropdown-item-button>Something else here</b-dropdown-item-button>-->
+         
         </b-dropdown>
       </div>
       <div class="header_middle1 ot">
-        <div class="ft">{{this.product_total}} &nbsp;</div>
-        <div class="ft">{{this.box_num}} &nbsp;</div>
-        <div class="ft">{{this.product_total-this.box_num}} &nbsp;</div>
+        <div class="ft">{{ this.product_total }} &nbsp;</div>
+        <div class="ft">{{ this.box_num }} &nbsp;</div>
+        <div class="ft">{{ this.product_total - this.box_num }} &nbsp;</div>
       </div>
       <div class="header_footer">
-        <!--<div style="margin-left: 1rem">已完成56/10</div>-->
-        <!--<div style="margin-right: 1.4rem">已完成10%</div>-->
+        
       </div>
     </div>
     <div class="bdy">
@@ -51,46 +119,30 @@
           <th style="width: 3rem">已包装数量</th>
           <th style="width: 3rem">未包装数量</th>
         </tr>
-        <tr
-            v-for="(item, index) in tableData"
-            :key="index"
-            @click="handleChoose(item, index)"
-            :class="item.is_choose ? 'choose_item' : ''"
-        >
+        <tr v-for="(item, index) in tableData" :key="index" @click="handleChoose(item, index)"
+          :class="item.is_choose ? 'choose_item' : ''">
 
           <td>{{ item.material_code_show }}</td>
-          <td>{{item.specs }}</td>
+          <td>{{ item.specs }}</td>
           <td>
             {{ item.decor_code_show }}
           </td>
           <td>{{ item.box_num_total }}</td>
-          <td>{{ item.qty-item.box_num_total }}</td>
+          <td>{{ item.qty - item.box_num_total }}</td>
         </tr>
       </table>
     </div>
     <div class="footer">
-      <Button
-          type="primary"
-          class="header_btn"
-          style="margin-right: 3rem; height: 2.6rem"
-          @click="handleReturn"
-      >
-        返回</Button
-      >
-      <Button
-          type="primary"
-          class="header_btn"
-          style="margin-left: 3rem; height: 2.6rem"
-          @click="handelGoSure"
-      >
-        确认</Button
-      >
+      <Button type="primary" class="header_btn" style="margin-right: 3rem; height: 2.6rem" @click="handleReturn">
+        返回</Button>
+      <Button type="primary" class="header_btn" style="margin-left: 3rem; height: 2.6rem" @click="handelGoSure">
+        确认</Button>
     </div>
-  </div>
+  </div> -->
 </template>
 <script>
 export default {
-  data () {
+  data() {
     return {
       tableData: [],
       is_show: true,
@@ -99,7 +151,7 @@ export default {
       box_num: 0,
     }
   },
-  mounted () {
+  mounted() {
     // if (localStorage.getItem('fyy_target')) {
     //   data.target = JSON.parse(localStorage.getItem('fyy_target'))
     // }
@@ -108,24 +160,28 @@ export default {
 
     const data = {
       url: 'http://121.36.142.167:7774/jbl/api/module-data/sale_order/page',
+<<<<<<< HEAD
       post: {"direction":"DESC","property":"id","fromClientType":"pc","number":0,"sorts":[],"rules":[{"field":"exe_sale_order_b.no","option":"LIKE_ANYWHERE","values":[this.$route.query.id]}],"size":15,"specialConditions":[],"workflowSearchBean":{},"dynamicFormCode":"sale_order","dynamicFormTable":null,"ignoreField":true,"developmentSystemId":null,"debugFlag":true}
+=======
+      post: { "direction": "DESC", "property": "id", "fromClientType": "pc", "number": 0, "sorts": [], "rules": [{ "field": "exe_sale_order_b.no", "option": "LIKE_ANYWHERE", "values": ["SO202308070001"] }], "size": 15, "specialConditions": [], "workflowSearchBean": {}, "dynamicFormCode": "sale_order", "dynamicFormTable": null, "ignoreField": true, "developmentSystemId": null, "debugFlag": true }
+>>>>>>> 2baf6b15e6a037b9f129e53ff9b04b009505652e
     }
     this.initData(data)
   },
   methods: {
-    initData (row) {
+    initData(row) {
       this.axios.post('/api/testdwy', { ...row }).then(res => {
         res.data.content.forEach(v => {
           v.is_choose = false
           v.no = v.exe_sale_order_b.no
-          v.un_box_num = v.qty-v.box_num_total
+          v.un_box_num = v.qty - v.box_num_total
           this.product_total += v.qty
           this.box_num += v.box_num_total
         })
         this.tableData.push(...res.data.content)
       })
     },
-    handelGoSure () {
+    handelGoSure() {
       if (this.tableData.filter(v => v.is_choose).length === 0) {
         return this.$Message.warning('请先选择数据！')
       }
@@ -135,15 +191,15 @@ export default {
       localStorage.setItem(dataId + '', text)
       this.$router.push({ path: '/cms/package/detailed', query: { id: dataId } })
     },
-    handleReturn () {
+    handleReturn() {
       localStorage.removeItem('fyy_target')
       this.$router.push('/cms/Package/index')
     },
-    handleChoose (item, index) {
+    handleChoose(item, index) {
       item.is_choose = !item.is_choose
       this.tableData.splice(index, 1, item)
     },
-    handleShow () {
+    handleShow() {
       this.is_show = !this.is_show
       if (this.is_show) {
         document.getElementsByClassName('header')[0].style = 'height:7rem;overflow:hidden;transition:all .4s;'
@@ -160,6 +216,230 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.return_btn {
+  background-image: url('../../../assets/home/return.png');
+  background-size: 100% 100%;
+}
+
+.confirm_btn {
+  background-image: url('../../../assets/home/confirm.png');
+  background-size: 100% 100%;
+}
+
+.return_btn,
+.confirm_btn {
+  width: 10.97rem;
+  height: 3.93rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 1.06rem;
+  font-weight: 500;
+  letter-spacing: 1px;
+}
+
+.secd_flex_s>span:nth-child(1) {
+  font-size: 0.94rem;
+  color: #ABDFFF;
+}
+
+.secd_flex_s>span:nth-child(2) {
+  font-size: 0.94rem;
+  color: #03FCD3;
+}
+
+.secd_g {
+  font-size: 1rem;
+  color: #ABDFFF
+}
+
+.secd_title_d {
+  font-size: 1.13rem;
+  color: #FFFFFF;
+  text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.5);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.secd_flex_w {
+  display: flex;
+  justify-content: space-between;
+  padding-right: 1.6rem;
+  box-sizing: border-box;
+}
+
+.secd_flex {
+  display: flex;
+  flex-direction: column;
+  gap: .375rem;
+
+  .secd_title {
+    font-size: 0.88rem;
+    color: #ABDFFF;
+    opacity: 0.5;
+  }
+}
+
+
+.check_box_c {
+  width: 1.19rem;
+  height: 100%;
+  background-image: url('../../../assets/home/check.png');
+  background-size: 100% 100%;
+
+}
+
+.check_box_c_active {
+  width: 1.3rem;
+  height: 100%;
+  background-image: url('../../../assets/home/checked.png');
+  background-size: 100% 100%;
+}
+
+.send_work {
+  height: 9.69rem;
+  background-image: url('../../../assets/home/packUpback.png');
+  background-size: 100% 100%;
+  margin-top: 1.38rem;
+  padding: 0.44rem 0.4rem 1.34rem 1.22rem;
+  box-sizing: border-box;
+
+  .check_box {
+    height: 1.19rem;
+    display: flex;
+    justify-content: right;
+  }
+}
+
+.com_top {
+  margin-top: 1.72rem !important;
+}
+
+.completion_con {
+  height: 5.19rem;
+  background-image: url('../../../assets/home/completion.png');
+  background-size: 100% 100%;
+  margin-top: 0.72rem;
+  padding: 1rem 1.28rem;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.home_con_s {
+  position: relative;
+
+  .pack_up {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 5.56rem;
+    background-image: url('../../../assets/home/packUp.png');
+    background-size: 100% 100%;
+    height: 1.97rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img {
+      width: 2.59rem;
+      height: 0.88rem;
+    }
+
+
+
+  }
+
+  .pack_up_d {
+    top: -1.1rem;
+  }
+
+  .pack_up_con {
+    height: 14.09rem;
+    background-image: url('../../../assets/home/packUpback.png');
+    background-size: 100% 100%;
+    padding: 1.78rem 2.03rem;
+    box-sizing: border-box;
+
+    .pack_up_name {
+      height: 1.25rem;
+      font-size: 1.25rem;
+      color: #fff;
+      font-weight: 600;
+    }
+
+    .pack_up_grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      row-gap: .625rem;
+
+      &>div {
+        display: flex;
+        flex-direction: column;
+        row-gap: .625rem;
+
+        &>div {
+          display: flex;
+          gap: .125rem;
+
+          span:nth-child(1) {
+            font-size: 1.63rem;
+            font-family: DIN-BoldItalic, DIN;
+            font-weight: 600;
+            color: #04FFD5;
+            line-height: 1.31rem;
+            transform: skewX(-10deg);
+            text-shadow: 0px 0px 0px rgba(4, 255, 213, 0.23);
+
+          }
+
+          span:nth-child(2) {
+            font-size: 1rem;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #ABDFFF;
+          }
+        }
+
+        &>p:nth-child(1) {
+          font-size: 1rem;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #ABDFFF;
+          margin-bottom: 0px;
+        }
+      }
+    }
+  }
+}
+
+.home_con_body {
+  width: 100%;
+  padding: 1rem;
+  box-sizing: border-box;
+}
+
+.home_header {
+  height: 3.125rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+.home_header_line {
+  width: 100%;
+  height: .0625rem;
+  background-color: #fff;
+  opacity: 0.2;
+}
+
 .header {
   width: 94%;
   height: 7rem;
@@ -173,6 +453,7 @@ export default {
   padding: 0.4rem 0.7rem 0 1rem;
   background: #fff;
 }
+
 .header_btn {
   border-radius: 1rem;
   padding: 0.1rem;
@@ -181,25 +462,30 @@ export default {
   justify-content: space-around;
   align-items: center;
 }
+
 .header_top {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
+
 .ot {
   position: relative;
   top: -1.3rem;
 }
+
 .header_middle1 {
   display: flex;
   justify-content: space-between;
   align-items: center;
+
   .ft {
     font-size: 1.5rem;
     width: 5rem;
     text-align: center;
   }
 }
+
 .header_middle {
   position: relative;
   top: -0.3rem;
@@ -207,8 +493,9 @@ export default {
   justify-content: space-between;
   align-items: center;
 }
-/deep/ .btn-group > .btn,
-.btn-group-vertical > .btn {
+
+/deep/ .btn-group>.btn,
+.btn-group-vertical>.btn {
   background: #ffffff;
   color: #2c3e50;
   outline: none;
@@ -216,17 +503,20 @@ export default {
   margin: 0;
   z-index: 3;
 }
+
 .header_footer {
   position: relative;
   top: -1.7rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
+
   div {
     font-size: 0.5rem;
     color: rgb(244, 136, 42);
   }
 }
+
 .bdy {
   width: 94%;
   height: calc(100% - 18.7rem);
@@ -240,34 +530,43 @@ export default {
   text-align: center;
   vertical-align: middle;
 }
+
 table {
-  border-collapse: collapse; /* 合并边框 */
-  width: 100%; /* 表格宽度 */
+  border-collapse: collapse;
+  /* 合并边框 */
+  width: 100%;
+  /* 表格宽度 */
   background: #fff;
   table-layout: fixed;
 }
+
 th {
   font-size: 0.6rem;
   background: #66b1f4;
   color: #fff;
 }
+
 td {
   font-size: 0.6rem;
   word-break: break-all;
 }
+
 td,
 th {
   vertical-align: middle;
   text-align: center;
-  border: 0.1rem solid #dddddd; /* 单元格边框样式 */
-  padding: 0.02rem; /* 单元格内边距 */
+  border: 0.1rem solid #dddddd;
+  /* 单元格边框样式 */
+  padding: 0.02rem;
+  /* 单元格内边距 */
 }
+
 .choose_item {
   background: #c8c8c8;
 }
+
 .footer {
   display: flex;
-  justify-content: space-around;
   width: 100%;
   position: absolute;
   bottom: 4.8rem;