diff --git a/src/api/wholeNetwork/index.js b/src/api/wholeNetwork/index.js
new file mode 100644
index 0000000..27320c1
--- /dev/null
+++ b/src/api/wholeNetwork/index.js
@@ -0,0 +1,8 @@
+import request from '@/utils/request'
+
+export function getSystemSourceList() {
+  return request({
+    url: '/system//pub/enums/product-source',
+    method: 'get'
+  })
+}
diff --git a/src/api/wholeNetwork/productManage.js b/src/api/wholeNetwork/productManage.js
new file mode 100644
index 0000000..90bd3c8
--- /dev/null
+++ b/src/api/wholeNetwork/productManage.js
@@ -0,0 +1,48 @@
+import request from '@/utils/request'
+
+export function getProductList(params) {
+  return request({
+    url: '/sale/manage/all-product/list',
+    method: 'get',
+    params
+  })
+}
+
+export function addProductInfo(params) {
+  return request({
+    url: '/sale/manage/all-product/save',
+    method: 'post',
+    data: params
+  })
+}
+
+export function updateProductInfo(params) {
+  return request({
+    url: '/sale/manage/all-product/update',
+    method: 'post',
+    data: params
+  })
+}
+
+export function deleteProduct(id) {
+  return request({
+    url: `/sale/manage/all-product/${id}`,
+    method: 'delete'
+  })
+}
+
+export function updateProductInventory(params) {
+  return request({
+    url: '/sale/manage/all-product/change-inventory',
+    method: 'post',
+    data: params
+  })
+}
+
+export function getProductDetailsList(params) {
+  return request({
+    url: '/sale/manage/all-product-detail/list',
+    method: 'get',
+    params
+  })
+}
diff --git a/src/router/index.js b/src/router/index.js
index fe20997..e8d08c6 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3474,6 +3474,27 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/whole-network',
+    name: 'WholeNetwork',
+    component: Layout,
+    meta: { title: '全网管理', icon: 'info', icon1: 'infoSel' },
+    children: [
+      {
+        path: 'productManage',
+        name: 'WholeNetworkProductManageList',
+        component: () => import('@/views/wholeNetwork/productManage/index'),
+        meta: { title: '全网产品管理' }
+      },
+      {
+        path: 'productManageDetails',
+        name: 'WholeNetworkProductManageDetails',
+        component: () => import('@/views/wholeNetwork/productManage/details'),
+        meta: { title: '全网产品管理详情' },
+        hidden: true
+      }
+    ]
+  },
 
   // 404 page must be placed at the end !!!
   { path: '*', redirect: '/404', hidden: true },
diff --git a/src/views/wholeNetwork/productManage/components/UpdateDialog.vue b/src/views/wholeNetwork/productManage/components/UpdateDialog.vue
new file mode 100644
index 0000000..799a930
--- /dev/null
+++ b/src/views/wholeNetwork/productManage/components/UpdateDialog.vue
@@ -0,0 +1,136 @@
+<template>
+  <div>
+    <el-dialog
+      :title="title"
+      :visible.sync="dialogVisible"
+      width="600px"
+      @close="handleClose"
+    >
+      <el-form ref="formRef" :rules="rules" :model="form" label-width="100px">
+        <el-form-item required label="仓储编号" prop="wmsCode">
+          <el-input v-model="form.wmsCode" />
+        </el-form-item>
+        <el-form-item style="margin-top: 10px;" required label="产品名称" prop="productName">
+          <el-input v-model="form.productName" />
+        </el-form-item>
+        <el-form-item style="margin-top: 10px;" required label="封面图" prop="cover">
+          <ImageUpload v-model="form.cover" />
+        </el-form-item>
+        <el-form-item style="margin-top: 10px;" label="备注" prop="remark">
+          <el-input v-model="form.remark" :maxlength="200" show-word-limit type="textarea" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="handleClose">
+          取消
+        </el-button>
+        <el-button type="primary" @click="handleSubmit">
+          确定
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { addProductInfo, updateProductInfo } from '@/api/wholeNetwork/productManage'
+import ImageUpload from '@/components/ImageUpload'
+export default {
+  name: 'UpdateDialog',
+  components: {
+    ImageUpload
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    isEdit: {
+      type: Boolean,
+      default: false
+    },
+    productInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      form: {
+        wmsCode: '',
+        productName: '',
+        cover: '',
+        remark: ''
+      },
+      rules: {
+        wmsCode: [
+          { required: true, message: '请输入仓储编号', trigger: 'blur' }
+        ],
+        productName: [
+          { required: true, message: '请输入产品名称', trigger: 'blur' }
+        ],
+        cover: [
+          { required: true, message: '请上传封面图', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  computed: {
+    title() {
+      return this.isEdit ? '编辑' : '添加'
+    },
+    dialogVisible: {
+      get() {
+        return this.visible
+      },
+      set(value) {
+        this.$emit('update:visible', value)
+      }
+    }
+  },
+  created() {
+    if (this.isEdit) {
+      this.form = {
+        ...this.productInfo
+      }
+      console.log(this.form)
+    }
+  },
+  methods: {
+    handleClose() {
+      this.dialogVisible = false
+    },
+    handleSubmit() {
+      this.$refs.formRef.validate((valid) => {
+        if (valid) {
+          if (this.isEdit) {
+            updateProductInfo(this.form).then((res) => {
+              if (res.code === 200) {
+                this.$message.success('修改成功')
+                this.dialogVisible = false
+                this.$emit('success')
+              }
+            })
+          } else {
+            const params = {
+              ...this.form,
+              inventory: ''
+            }
+            addProductInfo(params).then((res) => {
+              if (res.code === 200) {
+                this.$message.success('添加成功')
+                this.dialogVisible = false
+                this.$emit('success')
+              }
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/views/wholeNetwork/productManage/components/UpdateInventory.vue b/src/views/wholeNetwork/productManage/components/UpdateInventory.vue
new file mode 100644
index 0000000..a005290
--- /dev/null
+++ b/src/views/wholeNetwork/productManage/components/UpdateInventory.vue
@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <el-dialog
+      title="修改库存"
+      :visible.sync="dialogVisible"
+      width="600px"
+      @close="handleClose"
+    >
+      <el-form ref="formRef" :rules="rules" :model="form" label-width="100px">
+        <el-form-item required label="库存数量" prop="inventory">
+          <el-input v-model="form.inventory" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="handleClose">
+          取消
+        </el-button>
+        <el-button type="primary" @click="handleSubmit">
+          确定
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { updateProductInventory } from '@/api/wholeNetwork/productManage'
+export default {
+  name: 'UpdateInventory',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    inventoryInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      form: {
+        inventory: ''
+      },
+      rules: {
+        inventory: [
+          { required: true, message: '请输入库存数量', trigger: 'blur' },
+          { validator: this.validateInventory, trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.visible
+      },
+      set(val) {
+        this.$emit('update:visible', val)
+      }
+    }
+  },
+  created() {
+    this.form = {
+      ...this.inventoryInfo
+    }
+  },
+  methods: {
+    handleClose() {
+      this.dialogVisible = false
+    },
+    validateInventory(rule, value, callback) {
+      if (value <= 0) {
+        callback(new Error('库存数量不能小于0'))
+      } else {
+        callback()
+      }
+    },
+    handleSubmit() {
+      this.$refs.formRef.validate((valid) => {
+        if (valid) {
+          updateProductInventory(this.form).then((res) => {
+            if (res.code === 200) {
+              this.$message.success('修改库存成功')
+              this.$emit('success')
+              this.dialogVisible = false
+            }
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/views/wholeNetwork/productManage/details.vue b/src/views/wholeNetwork/productManage/details.vue
new file mode 100644
index 0000000..0882f55
--- /dev/null
+++ b/src/views/wholeNetwork/productManage/details.vue
@@ -0,0 +1,283 @@
+<template>
+  <div class="page">
+    <topBar
+      v-if="topList.length > 0"
+      :top-list="topList"
+      :moren="defaultSelected"
+    />
+    <div class="thetopbox">
+      <el-form label-width="100px">
+        <el-row>
+          <el-col :span="4">
+            <el-form-item label="来源系统" prop="source">
+              <el-select v-model="form.source" clearable>
+                <el-option v-for="item in systemSourceList" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+            <el-form-item label="来源订单号" prop="orderCode">
+              <el-input v-model="form.orderCode" clearable />
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="8">
+            <el-form-item label="时间范围" prop="timeRange">
+              <el-date-picker
+                v-model="timeRange"
+                value-format="yyyy-MM-dd"
+                type="daterange"
+                clearable
+                :range-separator="'至'"
+                :start-placeholder="'开始日期'"
+                :end-placeholder="'结束日期'"
+                @change="timeRangeHandleChange"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+            <div class="searchbox">
+              <el-button
+                class="my_search"
+                @click="
+                  () => {
+                    getSearch();
+                    resetPageNum();
+                  }
+                "
+              >
+                搜索</el-button>
+              <el-button class="my_reset" @click="resetHandle">
+                重置</el-button>
+            </div>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+    <div class="main">
+      <div class="maintop">
+        <div class="mainbtn">
+          <el-button v-hasButtons="['WholeNetworkProductManageDetailsExport']" size="small" class="thebtn1" @click="handleExport">
+            {{ '导出' }}</el-button>
+        </div>
+      </div>
+      <div class="maintable">
+        <el-table
+          v-loading="loading"
+          :data="tableData"
+          height="700px"
+          style="width: 100%"
+          :header-cell-style="{ background: '#EEEEEE' }"
+        >
+          <el-table-column
+            align="center"
+            prop="sourceVal"
+            label="来源系统"
+          />
+          <el-table-column
+            align="center"
+            prop="orderCode"
+            label="来源订单号"
+          />
+          <el-table-column
+            align="center"
+            prop="changeNum"
+            label="变动数量"
+            min-width="180px"
+          />
+          <el-table-column
+            align="center"
+            prop="remark"
+            label="变动说明"
+          />
+          <el-table-column
+            align="center"
+            prop="creationTime"
+            label="创建时间"
+          />
+
+        </el-table>
+      </div>
+    </div>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getSearch"
+    />
+  </div>
+</template>
+
+<script>
+import topBar from '@/components/topBar'
+import { getSystemSourceList } from '@/api/wholeNetwork'
+import { getProductDetailsList } from '@/api/wholeNetwork/productManage'
+const initSearch = {
+  startDate: null,
+  endDate: null
+}
+export default {
+  name: 'WholeNetworkProductManageDetails',
+  components: {
+    topBar
+  },
+
+  data() {
+    return {
+      defaultSelected: 'wholeNetworkProductManageDetails',
+      topList: [
+        {
+          name: '全网商品管理详情',
+          path: 'wholeNetworkProductManageDetails'
+        }
+      ],
+      tableData: [],
+      loading: false,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 50
+
+      },
+      form: {
+        ...initSearch
+      },
+      total: 0,
+      pkId: '',
+      timeRange: [],
+      systemSourceList: []
+    }
+  },
+  created() {
+    this.pkId = this.$route.query.pkId
+    this.getSystemSourceList()
+    this.getSearch()
+  },
+  methods: {
+    getSystemSourceList() {
+      getSystemSourceList().then((res) => {
+        if (res.code === 200) {
+          this.systemSourceList = res.data
+        }
+      })
+    },
+    // 导出
+    handleExport() {
+      this.$confirm('是否确认导出所有数据项?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then((_) => {
+        this.download(
+          '/sale/manage/all-product-detail/export',
+          { ...this.queryParams, ...this.form },
+          `${'全网商品管理'}${new Date().getTime()}.xlsx`
+        )
+      })
+    },
+    timeRangeHandleChange() {
+      this.form.startDate = this.timeRange?.[0] || null
+      this.form.endDate = this.timeRange?.[1] || null
+    },
+    resetHandle() {
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 50
+      }
+      this.timeRange = []
+      this.getSearch()
+    },
+    getSearch() {
+      this.loading = true
+      const params = {
+        ...this.queryParams,
+        ...this.form,
+        pkAllProduct: this.pkId
+      }
+      getProductDetailsList(params).then((res) => {
+        this.loading = false
+        if (res.code === 200) {
+          this.tableData = res.rows
+          this.total = res.total
+        }
+      })
+    },
+    resetPageNum() {
+      this.queryParams.pageNum = 1
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-image-viewer__close {
+  right: 500px;
+}
+::v-deep .dizhi .el-cascader {
+  width: 100%;
+}
+::v-deep .el-range-editor.el-input__inner {
+  width: 100%;
+}
+::v-deep .el-table thead {
+  color: #000000;
+}
+::v-deep .el-table .warning-row {
+  background: #f9f9f9;
+}
+.page {
+  padding: 10px 20px;
+  background: #f9f9f9;
+  font-size: 14px;
+  .thetopbox {
+    padding: 15px 20px 15px 0;
+    background: #ffffff;
+    border-radius: 8px;
+    .searchbox {
+      display: flex;
+      align-items: center;
+      margin-left: 40px;
+    }
+    .searchtitle {
+      margin-right: 10px;
+    }
+    .searchbtn {
+      background: #08143f;
+      color: #ffffff;
+    }
+  }
+  .main {
+    //margin-top: 20px;
+    background: #f9f9f9;
+    //border-radius: 8px;
+    //box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
+
+    .maintop {
+      display: flex;
+      // padding: 10px 0;
+      justify-content: space-between;
+      align-items: center;
+      .mainbtn {
+        .thebtn1 {
+          color: #ffffff;
+          background: #ffad41;
+          width: 68px;
+          height: 32px;
+        }
+        .thebtn2 {
+          color: #ffffff;
+          background: #009b58;
+          width: 68px;
+          height: 32px;
+        }
+        .thebtn3 {
+          color: #ffffff;
+          background: #c8161d;
+          width: 68px;
+          height: 32px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/wholeNetwork/productManage/index.vue b/src/views/wholeNetwork/productManage/index.vue
new file mode 100644
index 0000000..ecb6de6
--- /dev/null
+++ b/src/views/wholeNetwork/productManage/index.vue
@@ -0,0 +1,388 @@
+<template>
+  <div class="page">
+    <topBar
+      v-if="topList.length > 0"
+      :top-list="topList"
+      :moren="defaultSelected"
+    />
+    <div class="thetopbox">
+      <el-form label-width="100px">
+        <el-row>
+          <el-col :span="4">
+            <el-form-item label="仓储编号" prop="productName">
+              <el-input v-model="select.wmsCode" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+            <el-form-item label="产品名称" prop="productName">
+              <el-input v-model="select.productName" clearable />
+            </el-form-item>
+          </el-col>
+
+          <!-- <el-col :span="8">
+            <el-form-item label="时间范围" prop="timeRange">
+              <el-date-picker
+                v-model="timeRange"
+                value-format="yyyy-MM-dd"
+                type="daterange"
+                :clearable="false"
+                :range-separator="'至'"
+                :start-placeholder="'开始日期'"
+                :end-placeholder="'结束日期'"
+                @change="changeTime"
+              />
+            </el-form-item>
+          </el-col> -->
+          <el-col :span="4">
+            <div class="searchbox">
+              <el-button
+                class="my_search"
+                @click="
+                  () => {
+                    getSearch();
+                    resetPageNum();
+                  }
+                "
+              >
+                {{ '搜索' }}</el-button>
+              <el-button class="my_reset" @click="resetHandle">
+                {{ '重置' }}</el-button>
+            </div>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+    <div class="main">
+      <div class="maintop">
+        <div class="mainbtn">
+          <el-button v-hasButtons="['WholeNetworkProductManageListAdd']" size="small" class="addBtn" @click="addHandle">
+            新增</el-button>
+          <el-button v-hasButtons="['WholeNetworkProductManageListExport']" size="small" class="thebtn1" @click="handleExport">
+            导出</el-button>
+        </div>
+      </div>
+      <div class="maintable">
+        <el-table
+          v-loading="loading"
+          :data="tableData"
+          height="700px"
+          style="width: 100%"
+          :header-cell-style="{ background: '#EEEEEE' }"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column prop="colsele" type="selection" width="55" />
+          <el-table-column
+            align="center"
+            prop="wmsCode"
+            label="仓储编号"
+          />
+
+          <el-table-column
+            align="center"
+            prop="productName"
+            label="产品名称"
+            min-width="180px"
+          />
+          <el-table-column
+            align="center"
+            prop="inventory"
+            label="库存数量"
+          />
+          <el-table-column
+            align="center"
+            prop="cover"
+            label="封面图"
+          >
+            <template slot-scope="scope">
+              <img :src="scope.row.cover" alt="" style="width: 50px; height: 50px;">
+            </template>
+          </el-table-column>
+          <el-table-column
+            align="center"
+            prop="remark"
+            label="备注"
+          />
+          <el-table-column
+            align="center"
+            prop="colsele"
+            label="操作"
+          >
+            <template slot-scope="scope">
+              <el-button
+                type="text"
+                size="small"
+                style="color: #48b2fd; padding: 0"
+                @click.native.prevent="goDetail(scope.row)"
+              >
+                详情
+              </el-button>
+              <el-button
+                type="text"
+                size="small"
+                style="color: rgb(55, 191, 70); padding: 0"
+                @click.native.prevent="updateHandle(scope.row)"
+              >
+                修改
+              </el-button>
+              <el-button
+                type="text"
+                size="small"
+                style="padding: 0; color: #f3a900"
+                @click.native.prevent="updateInventoryHandle(scope.row)"
+              >
+                修改库存
+              </el-button>
+              <el-button
+                type="text"
+                size="small"
+                style="padding: 0; color: #c8161d"
+                @click.native.prevent="delHandle(scope.row)"
+              >
+                删除
+              </el-button>
+
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getSearch"
+    />
+    <UpdateDialog
+      v-if="updateDialogVisible"
+      :visible.sync="updateDialogVisible"
+      :is-edit="isEdit"
+      :product-info="productInfo"
+      @success="getSearch"
+    />
+    <UpdateInventory
+      v-if="updateInventoryVisible"
+      :visible.sync="updateInventoryVisible"
+      :inventory-info="inventoryInfo"
+      @success="getSearch"
+    />
+  </div>
+</template>
+
+<script>
+import { getProductList, deleteProduct } from '@/api/wholeNetwork/productManage'
+import topBar from '@/components/topBar'
+import { getMonthFirstDay, getMonthLastDay } from '@/utils/date'
+import UpdateDialog from './components/UpdateDialog.vue'
+import UpdateInventory from './components/UpdateInventory.vue'
+const initSearch = {
+  productName: '',
+  wmsCode: ''
+}
+export default {
+  name: 'WholeNetworkProductManageList',
+  components: {
+    topBar,
+    UpdateDialog,
+    UpdateInventory
+  },
+  data() {
+    return {
+      defaultSelected: 'wholeNetworkProductManageList',
+      topList: [
+        {
+          name: '全网商品管理',
+          path: 'wholeNetworkProductManageList'
+        }
+      ],
+      tableData: [],
+      loading: false,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 50
+      },
+      timeRange: [
+        getMonthFirstDay(),
+        getMonthLastDay()
+      ],
+      select: {
+        ...initSearch
+      },
+      total: 0,
+      multipleSelection: [],
+      updateDialogVisible: false,
+      isEdit: false,
+      productInfo: {
+        remark: ''
+      },
+      updateInventoryVisible: false,
+      inventoryInfo: {
+        inventory: ''
+      }
+    }
+  },
+  created() {
+    this.getSearch()
+  },
+  methods: {
+    delHandle(val) {
+      this.$confirm('是否确认删除该数据?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then((_) => {
+        deleteProduct(val.pkId).then((res) => {
+          if (res.code === 200) {
+            this.$message.success('删除成功')
+            this.getSearch()
+          }
+        })
+      })
+    },
+    updateHandle(val) {
+      this.isEdit = true
+      this.productInfo = val
+      this.updateDialogVisible = true
+    },
+    addHandle() {
+      this.isEdit = false
+      this.productInfo = {
+        remark: ''
+      }
+      this.updateDialogVisible = true
+    },
+    updateInventoryHandle(val) {
+      this.inventoryInfo = val
+      this.updateInventoryVisible = true
+    },
+    goDetail(val) {
+      this.$router.push({
+        path: 'productManageDetails',
+        query: {
+          pkId: val.pkId
+        }
+      })
+    },
+
+    // 导出
+    handleExport() {
+      this.$confirm('是否确认导出所有数据项?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then((_) => {
+        this.download(
+          '/sale/manage/all-product/export',
+          Object.assign({}, this.queryParams, this.select),
+          `${'全网商品管理'}${new Date().getTime()}.xlsx`
+        )
+      })
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    resetHandle() {
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 50
+      }
+
+      this.select = {
+        ...initSearch
+
+      }
+      this.getSearch()
+    },
+    getSearch() {
+      this.loading = true
+      const params = {
+        ...this.queryParams,
+        ...this.select
+      }
+      getProductList(params).then((res) => {
+        this.loading = false
+        if (res.code === 200) {
+          this.tableData = res.rows
+          this.total = res.total
+        }
+      })
+    },
+    resetPageNum() {
+      this.queryParams.pageNum = 1
+    }
+  }
+}
+</script>
+
+      <style lang="scss" scoped>
+::v-deep .el-image-viewer__close {
+  right: 500px;
+}
+::v-deep .dizhi .el-cascader {
+  width: 100%;
+}
+::v-deep .el-range-editor.el-input__inner {
+  width: 100%;
+}
+::v-deep .el-table thead {
+  color: #000000;
+}
+::v-deep .el-table .warning-row {
+  background: #f9f9f9;
+}
+.page {
+  padding: 10px 20px;
+  background: #f9f9f9;
+  font-size: 14px;
+  .thetopbox {
+    padding: 15px 20px 15px 0;
+    background: #ffffff;
+    border-radius: 8px;
+    .searchbox {
+      display: flex;
+      align-items: center;
+      margin-left: 40px;
+    }
+    .searchtitle {
+      margin-right: 10px;
+    }
+    .searchbtn {
+      background: #08143f;
+      color: #ffffff;
+    }
+  }
+  .main {
+    //margin-top: 20px;
+    background: #f9f9f9;
+    //border-radius: 8px;
+    //box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
+
+    .maintop {
+      display: flex;
+      // padding: 10px 0;
+      justify-content: space-between;
+      align-items: center;
+      .mainbtn {
+        .thebtn1 {
+          color: #ffffff;
+          background: #ffad41;
+          width: 68px;
+          height: 32px;
+        }
+        .thebtn2 {
+          color: #ffffff;
+          background: #009b58;
+          width: 68px;
+          height: 32px;
+        }
+        .thebtn3 {
+          color: #ffffff;
+          background: #c8161d;
+          width: 68px;
+          height: 32px;
+        }
+      }
+    }
+  }
+}
+</style>