提交

src/components/BreadCrumb/index.vue

@@ -29,7 +29,7 @@ const linkTo = () => {
       <el-breadcrumb class="text-hex-5B5B5B text-12px tracking-wide" :separator-icon="ArrowRight">
         <transition-group name="breadcrumb">
           <el-breadcrumb-item v-for="({ name, title }) in matchedList" :key="name">
-            <span>&nbsp;{{ title }}</span>
+            <span class="text-12px">&nbsp;{{ title }}</span>
           </el-breadcrumb-item>
         </transition-group>
       </el-breadcrumb>

src/pages/index.vue

@@ -0,0 +1,17 @@
+<template>
+
+</template>
+<route lang="json">
+{
+"redirect":"/process"
+}
+</route>
+<script>
+export default {
+  name: "index"
+}
+</script>
+
+<style scoped>
+
+</style>

src/pages/process/detail/[id].vue

@@ -0,0 +1,114 @@
+<template>
+  <NavHeader/>
+  <bread-crumb/>
+  <div class="w-1200px m-auto">
+     <div class="relative -mt-40px flex justify-end">
+       <button type="button" class="back-btn" @click="linkTo('process')">返回</button>
+     </div>
+     <div class="w-full h-869px bg-hex-FFF pt-25px">
+       <h3 class="text-18px text-center">详情</h3>
+       <div class="mt-70px pl-300px">
+         <div class="flex">
+           <h3 class="w-80px text-right text-16px leading-20px text-hex-949494 font-bold mr-30px">考试名称</h3>
+           <div class="flex-1 text-16px leading-20px">联考</div>
+         </div>
+         <div class="mt-40px flex">
+           <h3 class="w-80px text-right text-16px leading-20px text-hex-949494 font-bold mr-30px">考试时间</h3>
+           <div class="flex-1 text-16px leading-20px">2022-11-23  至 2022-12-12</div>
+         </div>
+         <div class="mt-40px flex">
+           <h3 class="w-80px text-right text-16px leading-20px text-hex-949494 font-bold mr-30px">考试类型</h3>
+           <div class="flex-1 text-16px leading-20px">联考</div>
+         </div>
+         <div class="mt-40px flex">
+           <h3 class="w-80px text-right text-16px leading-20px text-hex-949494 font-bold mr-30px">联考学校</h3>
+           <div class="flex-1 text-16px leading-20px">蒙阴市中小学 蒙阴市中小学 蒙阴市中小学 蒙阴市中小学</div>
+         </div>
+         <div class="mt-40px flex">
+           <h3 class="w-80px text-right text-16px leading-20px text-hex-949494 font-bold mr-30px">考试年级</h3>
+           <div class="flex-1 text-16px leading-20px">一年级</div>
+         </div>
+         <div class="mt-40px flex">
+           <h3 class="w-80px text-right text-16px leading-20px text-hex-949494 font-bold mr-30px">考试科目</h3>
+           <div class="flex-1 text-16px leading-20px">语文 数学 英语 物理 化学 生物 地理</div>
+         </div>
+         <div class="mt-40px flex">
+           <h3 class="w-80px text-right text-16px leading-20px text-hex-949494 font-bold mr-30px">考试形式</h3>
+           <div class="flex-1 text-16px leading-20px">线上考试</div>
+         </div>
+         <div class="mt-40px flex">
+           <h3 class="w-80px text-right text-16px leading-20px text-hex-949494 font-bold mr-30px">阅卷流程</h3>
+           <div class="flex-1 text-16px leading-20px">先上传后划块</div>
+         </div>
+         <div class="mt-40px flex">
+           <h3 class="text-16px leading-20px w-80px text-right text-hex-949494 font-bold mr-30px">状态</h3>
+           <div class="flex-1 text-16px leading-20px">
+             <span class="inline-block align-middle">进行中</span>
+             <div class="inline-block align-middle ml-10px process-state">
+               <h3 class="state-line">
+                 <span style="width: 11%;"></span>
+               </h3>
+             </div>
+             <span class="ml-10px inline-block align-middle">11%</span>
+           </div>
+         </div>
+       </div>
+     </div>
+  </div>
+</template>
+<route lang="json">
+{
+  "meta":{
+  "title":"阅卷流程详情",
+  "breadcrumb": true
+  }
+}
+</route>
+<script setup>
+import { useRouter } from "vue-router";
+const router = useRouter();
+console.log(router,87)
+const linkTo = (name) => {
+  router.push({ name });
+};
+</script>
+
+<style lang="scss" scoped>
+.back-btn {
+  width: 90px;
+  height: 36px;
+  background: #fff;
+  border: 1px solid #003eee;
+  border-radius: 4px;
+  font-size: 14px;
+  color: #003eee;
+  text-align: center;
+}
+.process-state {
+  width: 140px;
+
+  .state-line {
+    width: 100%;
+    height: 5px;
+    background: #e2e2e2;
+    border-radius: 3px;
+
+    span {
+      display: block;
+      height: 5px;
+      background: #003eee;
+      border-radius: 3px;
+    }
+  }
+
+  .state-info {
+    position: absolute;
+    top: 8px;
+    left: 0;
+    width: 100%;
+    font-size: 13px;
+    color: #003eee;
+    text-align: center;
+  }
+}
+</style>

src/pages/index/index.vue

@@ -7,11 +7,10 @@
         v-model="exam_time"
         value-format="YYYY-MM-DD"
         type="date"
-        style="width: 198px"
         placeholder="考试时间"
         size="large"
       />
-      <el-select class="ml-20px" v-model="exam_form" placeholder="考试形式" size="large">
+      <el-select class="ml-10px" v-model="exam_form" placeholder="考试形式" size="large">
         <el-option label="全部" value="0"
         />
         <el-option
@@ -33,12 +32,13 @@
       </el-select>
       <el-input
         v-model="keyword"
-        class="ml-20px w-198px"
+        class="ml-20px"
+        style="width: 200px;"
         size="large"
         clearable
         placeholder="请输入关键字"
       />
-      <el-button class="ml-20px" type="primary" size="large">搜索</el-button>
+      <el-button color="#003eee" class="ml-20px" type="primary" size="large">搜索</el-button>
     </div>
     <div class="flex mt-20px justify-between">
       <button type="button" class="add-btn">
@@ -88,7 +88,7 @@
             <div class="w-180px text-left">2023.2.4~2023.2.17</div>
             <div class="w-300px">
               <button type="button" class="op-btn">编辑</button>
-              <button type="button" class="op-btn ml-10px">详情</button>
+              <button type="button" class="op-btn ml-10px" @click="linkTo({name:'process-detail-id',params:{id:'1'}})">详情</button>
               <div class="ml-10px relative op-btn cursor-pointer">
                 <span class="inline-block align-middle leading-28px">更多</span>
                 <div class="more-list">
@@ -302,11 +302,11 @@
 }
 </route>
 <script setup>
-import {process_list} from "~/pages/index/api";
+import {process_list} from "~/pages/process/api";
 import { useRouter } from "vue-router";
 const router = useRouter();
-const linkTo = (name) => {
-  router.push({ name });
+const linkTo = (obj) => {
+  router.push(obj);
 };
 let exam_time = $ref('')
 let exam_form = $ref('')

src/styles/main.css

@@ -21,15 +21,15 @@ html.dark {
 .font-size-12{
   font-size: 12px;
 }
-.el-button--primary{
-  background:#003eee;
-  border-color: #003eee;
-}
-.el-button--primary:hover{
-  background:#003eee;
-  border-color: #003eee;
-  opacity: .65;
-}
+/*.el-button--primary{*/
+/*  background:#003eee;*/
+/*  border-color: #003eee;*/
+/*}*/
+/*.el-button--primary:hover{*/
+/*  background:#003eee;*/
+/*  border-color: #003eee;*/
+/*  opacity: .65;*/
+/*}*/
 .el-input__wrapper.is-focus,
 .el-select .el-input.is-focus .el-input__wrapper{
   box-shadow: 0 0 0 1px #003eee!important;

unocss.config.ts

@@ -1,35 +0,0 @@
-import {
-  defineConfig,
-  presetAttributify,
-  presetIcons,
-  presetUno,
-  presetWebFonts,
-  // transformerDirectives,
-  // transformerVariantGroup,
-} from 'unocss'
-
-export default defineConfig({
-  shortcuts: [
-    ['btn', 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
-    ['icon-btn', 'text-[0.9em] inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600 !outline-none'],
-  ],
-  presets: [
-    presetUno(),
-    presetAttributify(),
-    presetIcons({
-      scale: 1.2,
-      warn: true,
-    }),
-    presetWebFonts({
-      fonts: {
-        sans: 'DM Sans',
-        serif: 'DM Serif Display',
-        mono: 'DM Mono',
-      },
-    }),
-  ],
-  // transformers: [
-  //   transformerDirectives(),
-  //   transformerVariantGroup(),
-  // ],
-})