diff --git a/debug.log b/debug.log
deleted file mode 100644
index 670373e..0000000
--- a/debug.log
+++ /dev/null
@@ -1 +0,0 @@
-[0730/194221.616:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
diff --git a/src/api/mail.js b/src/api/mail.js
new file mode 100644
index 0000000..18edaf5
--- /dev/null
+++ b/src/api/mail.js
@@ -0,0 +1,31 @@
+import request from '@/utils/request'
+
+// ---------------------------------------------- //
+
+// 鑾峰彇閭欢鍒楄〃
+export function getMails(params) {
+  return request({
+    url: '/games/mail',
+    method: 'get',
+    params
+  })
+}
+
+// 淇濆瓨閭欢
+export function saveMail(data) {
+  return request({
+    url: '/games/mail',
+    method: 'post',
+    data
+  })
+}
+
+// 鍒犻櫎閭欢
+export function delMails(data) {
+  return request({
+    url: '/games/mail',
+    method: 'delete',
+    data
+  })
+}
+
diff --git a/src/router/modules/games.js b/src/router/modules/games.js
index 8a2c989..0808e40 100644
--- a/src/router/modules/games.js
+++ b/src/router/modules/games.js
@@ -136,6 +136,12 @@ const gamesRouter = {
           name: 'GameDetailsReward',
           meta: { title: '瀹㈡湇濂栧姳' }
         },
+        {
+          path: 'mail',
+          component: () => import('@/views/games/details/mail'),
+          name: 'GameDetailsMail',
+          meta: { title: '閭欢' }
+        },
         {
           path: 'ad/ad-pos',
           component: () => import('@/views/games/details/ad/adPos'),
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 98ca1c7..3cd06ea 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -1,6 +1,5 @@
 /* 闈㈡澘 */
 #app {
-  min-width: 1800px;
 }
 
 .app-main {
diff --git a/src/views/games/details/index.vue b/src/views/games/details/index.vue
index c15aeb3..203ffa3 100644
--- a/src/views/games/details/index.vue
+++ b/src/views/games/details/index.vue
@@ -30,6 +30,10 @@
         v-if="uid !== 'new'"
         :index="`/games/details/${uid}/reward`"
       >瀹㈡湇濂栧姳</el-menu-item>
+      <el-menu-item
+        v-if="uid !== 'new'"
+        :index="`/games/details/${uid}/mail`"
+      >閭欢</el-menu-item>
       <el-menu-item
         v-if="uid !== 'new'"
         :index="`/games/details/${uid}/recommendation`"
diff --git a/src/views/games/details/mail.vue b/src/views/games/details/mail.vue
new file mode 100644
index 0000000..f89fe23
--- /dev/null
+++ b/src/views/games/details/mail.vue
@@ -0,0 +1,709 @@
+<template>
+  <div class="main-content">
+    <!-- toolbar -->
+    <div class="toolbar clearfix">
+      <div
+        class="l fl"
+        v-if="permEdit"
+      >
+        <el-button
+          type="primary"
+          @click="addMail"
+        >鏂板</el-button>
+        <el-button
+          @click="switchData"
+          type="success"
+        >{{ switchText }}</el-button>
+        <el-button
+          v-if="batch.show && ((isDev && permEdit) || (!isDev && permPublish))"
+          type="danger"
+          @click="batchDel"
+        >鎵归噺鍒犻櫎</el-button>
+        <el-button @click="batchOpt"> {{ batch.txt }} </el-button>
+      </div>
+      <div class="r fr">
+        <el-button
+          type="primary"
+          @click="refreshData"
+        >鍒锋柊</el-button>
+      </div>
+    </div>
+    <!-- table -->
+    <el-alert
+      title="褰撳墠鏁版嵁涓恒�愭寮忋�戞暟鎹紒"
+      type="warning"
+      class="mgt-20 mgb-20"
+      effect="dark"
+      v-if="!isDev"
+    />
+    <el-table
+      v-loading="isLoaded"
+      :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
+      style="width: 100%"
+      stripe
+      class="table mgt-20 mgb-20"
+      @row-click="rowClick"
+      @selection-change="tableSelectionChange"
+    >
+      <el-table-column
+        v-if="batch.show"
+        type="selection"
+        width="55"
+      />
+      <el-table-column
+        type="index"
+        :index="indexMethod">
+      </el-table-column>
+      <el-table-column
+        prop="mailtype"
+        label="绫诲瀷"
+        sortable
+        show-overflow-tooltip
+        :formatter="formType"
+      />
+      <el-table-column
+        prop="subject"
+        label="閭欢涓婚"
+        sortable
+        show-overflow-tooltip
+      />
+      <el-table-column
+        prop="attachments"
+        label="鐗╁搧"
+        sortable
+        show-overflow-tooltip
+        :formatter="formItems"
+      />
+
+      <el-table-column
+        prop="sendtime"
+        label="鍙戦�佹椂闂�"
+        sortable
+        show-overflow-tooltip
+        :formatter="formdate"
+      />
+      <el-table-column
+        prop="expiretime"
+        label="杩囨湡鏃堕棿"
+        sortable
+        show-overflow-tooltip
+        :formatter="formdate"
+      />
+      <el-table-column
+        label="鎿嶄綔"
+        fixed="right"
+        width="170"
+      >
+
+        <template slot-scope="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click.stop="editReward(scope.row)"
+          >璇︽儏</el-button>
+          <el-button
+            v-if=" (isDev && permEdit) || (!isDev && permPublish)"
+            type="text"
+            size="small"
+            @click.stop="delMail(scope.row)"
+          >鍒犻櫎</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- pagination -->
+    <el-pagination
+      class="al-r"
+      layout="total, sizes, prev, pager, next, jumper"
+      :hide-on-single-page="true"
+      :current-page="currentPage"
+      :page-sizes="[10, 20, 50, 100]"
+      :page-size="pageSize"
+      :total="total"
+      @size-change="sizeChange"
+      @current-change="pageChange"
+    />
+    <!-- Modal1 -->
+    <el-dialog
+      title="缂栬緫閭欢"
+      :visible.sync="modalVisible"
+      :before-close="closeModal"
+      width="700px"
+    >
+      <el-form
+        ref="modalForm"
+        :model="modalForm"
+        :rules="modalRules"
+        label-width="100px"
+      >
+        <el-form-item
+          label="鍙戜欢浜�"
+          prop="mailFrom"
+        >
+          <el-input v-model="modalForm.from" :disabled="!isNew"/>
+          <span class="ipt-tip">鍙戜欢浜�</span>
+        </el-form-item>
+        <el-form-item
+          label="閭欢绫诲瀷"
+          prop="mailtype"
+        >
+          <el-radio-group v-model="modalForm.mailtype">
+            <el-radio :label="1" :disabled="!isNew">涓汉閭欢</el-radio>
+            <el-radio :label="2" :disabled="!isNew">缇ゅ彂閭欢</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item
+          v-if="modalForm.mailtype == 2"
+          label="鐢ㄦ埛绫诲瀷"
+          prop="usertype"
+        >
+          <el-radio-group v-model="modalForm.usertype">
+            <el-radio :label="0" :disabled="!isNew">鍏ㄤ綋鐢ㄦ埛</el-radio>
+            <el-radio :label="1" :disabled="!isNew">閭欢鍙戦�佹椂闂翠箣鍓嶆敞鍐岀殑鐢ㄦ埛</el-radio>
+            <el-radio :label="2" :disabled="!isNew">閭欢鍙戦�佷箣鍚庢敞鍐岀殑鐢ㄦ埛</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item
+          v-if="modalForm.mailtype == 1"
+          label="鍙戜欢浜�"
+          prop="mailTo"
+        >
+          <el-input v-model="modalForm.to" :disabled="!isNew"/>
+          <span class="ipt-tip">鏀朵欢浜�</span>
+        </el-form-item>
+        <el-form-item
+          label="閭欢瀛愮被鍨�"
+          prop="mailsubtype"
+        >
+          <el-input v-model="modalForm.mailsubtype" :disabled="!isNew"/>
+        </el-form-item>
+        <el-form-item
+          label="閭欢涓婚"
+          prop="subject"
+        >
+          <el-input v-model="modalForm.subject"/>
+          <span class="ipt-tip">閭欢涓婚</span>
+        </el-form-item>
+        <el-form-item
+          label="閭欢姝ｆ枃"
+          prop="content"
+        >
+          <el-input
+            type="textarea"
+            v-model="modalForm.content"
+          />
+        </el-form-item>
+        <el-form-item
+          label="鎵╁睍瀛楁"
+          prop="ext"
+        >
+          <el-input v-model="modalForm.ext"/>
+        </el-form-item>
+        <el-form-item
+          class="ipt-tip"
+          label="鍙戦�佹椂闂�"
+          prop="sendtime"
+        >
+          <el-date-picker
+            v-model="modalForm.sendtime"
+            type="datetime"
+            placeholder="閫夋嫨鍙戦�佹椂闂�"/>
+        </el-form-item>
+        <el-form-item
+          class="ipt-tip"
+          label="杩囨湡鏃堕棿"
+          prop="expiretime"
+        >
+          <el-date-picker
+            v-model="modalForm.expiretime"
+            type="datetime"
+            placeholder="閫夋嫨杩囨湡鏃堕棿"/>
+        </el-form-item>
+        <el-form-item
+          label="鐗╁搧"
+          prop="items"
+        >
+          <el-table
+            :data="modalForm.attachments"
+            style="width: 100%"
+            size="mini"
+          >
+            <el-table-column
+              prop="itemid"
+              label="鐗╁搧"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              prop="itemnum"
+              label="鏁伴噺"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              label="鎿嶄綔"
+              fixed="right"
+            >
+              <template slot-scope="scope">
+                <el-button
+                  type="text"
+                  size="small"
+                  @click="editItem(scope.$index,scope.row)"
+                  v-if="permEdit"
+                >缂栬緫</el-button>
+                <el-button
+                  v-if="permEdit"
+                  type="text"
+                  size="small"
+                  @click="delItem(scope.$index)"
+                >鍒犻櫎</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-button
+            type="primary"
+            size="mini"
+            @click="addItem"
+            v-if="permEdit"
+          >娣诲姞</el-button>
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="closeModal">鍙� 娑�</el-button>
+        <el-button
+          type="primary"
+          @click="save"
+          v-if="permEdit"
+        >纭� 瀹�</el-button>
+      </div>
+    </el-dialog>
+    <!-- Modal2 -->
+    <el-dialog
+      title="缂栬緫闄勪欢"
+      :visible.sync="innerModalVisible"
+      append-to-body
+      :before-close="closeInnerModal"
+      width="700px"
+    >
+      <el-form
+        ref="innerModalForm"
+        :model="innerModalForm"
+        :rules="innerModalRules"
+        label-width="100px"
+      >
+        <el-form-item
+          label="鐗╁搧ID"
+          prop="itemid"
+        >
+          <el-input v-model="innerModalForm.itemid"/>
+        </el-form-item>
+        <el-form-item
+          label="鏁伴噺"
+          prop="itemnum"
+        >
+          <el-input v-model.number="innerModalForm.itemnum"/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="closeInnerModal">鍙� 娑�</el-button>
+        <el-button
+          type="primary"
+          @click="saveItem"
+          v-if="permEdit"
+        >纭� 瀹�</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { getGame } from '@/api/games'
+import getPageTitle from '@/utils/get-page-title'
+import {
+  getMails,
+  saveMail,
+  delMails,
+  getOpsToken
+} from '@/api/mail'
+import moment from 'moment'
+
+export default {
+  name: 'GameDetailsMail',
+  data() {
+    return {
+      // common
+      uid: '',
+      gameInfo: {},
+      permEdit: false,
+      permPublish: false,
+      isNew: false,
+      isNewItem: false,
+      isDev: true,
+      uploadUrl: '',
+      // toolbar
+      batch: {
+        show: false,
+        txt: '鎵归噺鎿嶄綔'
+      },
+      switchText: '鑾峰彇姝ｅ紡鏁版嵁',
+      //  table
+      tableData: [],
+      isLoaded: false,
+      multipleSelection: [],
+      // pagination
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      // modal1
+      modalVisible: false,
+      modalForm: {
+        subject: '',
+        actived: true,
+        attachments: [],
+        content: '',
+        to: '',
+        from: '',
+        sendtime: '',
+        expiretime: '',
+        mailtype: 1,
+        mailsubtype: 0,
+        usertype: 0,
+        gameid: '',
+        ext: ''
+      },
+      modalRules: {
+        subject: [{ required: true, message: '璇疯緭鍏ュ叧閿瓧', trigger: 'blur' }],
+        sendtime: [{ required: true, message: '璇烽�夋嫨鍙戦�佹椂闂�', trigger: 'blur' }],
+        expiretime: [{ required: true, message: '璇烽�夋嫨杩囨湡鏃堕棿', trigger: 'blur' }],
+      },
+      modalItemList: [],
+      // modal2
+      innerModalVisible: false,
+      innerModalForm: {
+        itemid: '',
+        itemnum: 1
+      },
+      innerModalRules: {
+        itemnid: [
+          { required: true, message: '璇疯緭鍏ョ墿鍝� id', trigger: 'blur' }
+        ],
+        itemnum: [
+          { required: true, message: '璇疯緭鍏ョ墿鍝佹暟閲�', trigger: 'blur' },
+          {
+            type: 'number',
+            message: '鐗╁搧鏁伴噺鍙兘涓烘暟瀛�',
+            trigger: 'blur'
+          }
+        ]
+      },
+      curItem: 0,
+    }
+  },
+  computed: {
+    ...mapGetters(['userInfo'])
+  },
+  mounted() {
+    this.uid = this.$route.params.uid
+    this.permEdit =
+      this.userInfo.permissions.includes(`${this.uid}-edit`) ||
+      this.userInfo.permissions.includes(`${this.uid}-publish`) ||
+      this.userInfo.permissions.includes(`games-writeable`)
+    this.permPublish =
+      this.userInfo.permissions.includes(`${this.uid}-publish`) ||
+      this.userInfo.permissions.includes(`games-writeable`)
+    this.uploadUrl = process.env.VUE_APP_OPS_API + '/upload/'
+    this.getGameInfo(this.queryMails)
+  },
+  methods: {
+    switchData() {
+      this.isDev = !this.isDev
+      this.isDev
+        ? (this.switchText = '鑾峰彇姝ｅ紡鏁版嵁')
+        : (this.switchText = '鑾峰彇娴嬭瘯鏁版嵁')
+      this.currentPage = 1
+      this.queryMails()
+    },
+    getGameInfo(cb) {
+      getGame({ uid: this.uid })
+        .then(res => {
+          const { data } = res
+          if (data.errcode === 0) {
+            this.gameInfo = data.gameInfo
+            this.$route.meta.title = this.gameInfo.game_name
+            document.title = getPageTitle(this.gameInfo.game_name)
+          }
+          if (cb && cb instanceof Function) cb()
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+    queryMails() {
+      this.isLoaded = true
+      getMails({
+        uid: this.gameInfo._id,
+        gameid: this.gameInfo.game_id,
+        currentPage: this.currentPage,
+        pageSize: this.pageSize,
+        isDev: this.isDev
+      })
+        .then(res => {
+          const data = res.data
+          if (data.errcode === 0) {
+            this.tableData = data.maillist
+            this.total = data.maillist.length;
+            this.isLoaded = false
+          }
+        })
+        .catch(err => {
+          console.log(err)
+          this.isLoaded = false;
+        })
+    },
+    getOpsToken() {
+      return new Promise((resolve, reject) => {
+        getOpsToken()
+          .then(res => {
+            const data = res.data
+            data.errcode === 0 ? resolve(data.result) : reject(data.errmsg)
+          })
+          .catch(err => {
+            reject(err)
+          })
+      })
+    },
+    validateForm(formName) {
+      return new Promise((resolve, reject) => {
+        this.$refs[formName].validate(valid => {
+          valid ? resolve(valid) : reject(valid)
+        })
+      })
+    },
+    clearValidate(formName) {
+      this.$refs[formName].clearValidate()
+    },
+
+    // toolbar
+    addMail() {
+      this.openModal()
+      this.isNew = true
+      this.modalForm = {
+        subject: '',
+        actived: true,
+        attachments: [],
+        content: '',
+        to: '',
+        from: '',
+        sendtime: new Date(Date.now() + 86400000),
+        expiretime: new Date(Date.now() + 86400000),
+        mailtype: 1,
+        mailsubtype: 0,
+        usertype: 0,
+        ext: ''
+      }
+    },
+    batchOpt() {
+      this.batch.show = !this.batch.show
+      this.batch.txt = this.batch.show ? '鍏抽棴' : '鎵归噺鎿嶄綔'
+    },
+    refreshData() {
+      this.queryMails()
+    },
+    // table
+    editReward(row) {
+      this.isNew = false
+      this.modalForm = JSON.parse(JSON.stringify(row))
+      this.openModal()
+    },
+    addItem() {
+      this.isNewItem = true
+      this.openInnerModal()
+      this.innerModalForm = {
+        itemid: '',
+        itemnum: 1
+      }
+    },
+    editItem(index, row) {
+      this.isNewItem = false
+      this.innerModalForm = JSON.parse(JSON.stringify(row))
+      this.curItem = index
+      this.openInnerModal()
+    },
+    delItem(index) {
+      this.modalForm.attachments.splice(index, 1)
+    },
+    save() {
+      this.validateForm('modalForm')
+        .then(() => {
+          this.modalForm.gameid = this.gameInfo.game_id
+
+          this.saveMail({ data: this.modalForm, isDev: this.isDev })
+            .then(res => {
+              this.$message.success('淇濆瓨鎴愬姛锛�')
+              this.queryMails()
+              this.closeModal()
+            })
+            .catch(err => {
+              console.log(err)
+            })
+        })
+        .catch(() => {
+          this.$message.error('璇锋寜瑕佹眰濉啓琛ㄥ崟锛�')
+        })
+    },
+    delMail(row) {
+      this.$confirm('鏄惁纭鍒犻櫎璇ラ偖浠�?', '鎻愮ず', {
+        confirmButtonText: '纭畾',
+        cancelButtonText: '鍙栨秷',
+        type: 'warning'
+      })
+        .then(() => {
+          delMails({
+            uid: this.gameInfo._id,
+            ids: [row.mailid],
+            gameid: this.gameInfo.game_id,
+            isDev: this.isDev
+          })
+            .then(res => {
+              const data = res.data
+              if (data.errcode === 0) {
+                this.$message.success('宸叉垚鍔熷垹闄よ閭欢锛�')
+                this.queryMails()
+              }
+            })
+            .catch(err => {
+              console.log(err)
+            })
+        })
+        .catch(() => {
+          this.$message.info('宸插彇娑堝垹闄わ紒')
+        })
+    },
+    batchDel() {
+      if (this.multipleSelection.length === 0) {
+        this.$message.error('鏃犻�変腑閭欢锛�')
+        return
+      }
+      const ids = this.multipleSelection.map(item => {
+        return item.mailid
+      })
+      this.$confirm(
+        `鏄惁瑕佸垹闄ら�変腑鐨�${this.multipleSelection.length}鏉￠偖浠禶,
+        '鎻愮ず',
+        {
+          confirmButtonText: '纭畾',
+          cancelButtonText: '鍙栨秷',
+          type: 'warning'
+        }
+      )
+        .then(() => {
+          delMails({
+            uid: this.gameInfo._id,
+            ids: ids,
+            gameid: this.gameInfo.game_id,
+            isDev: this.isDev
+          })
+            .then(res => {
+              const data = res.data
+              if (data.errcode === 0) {
+                this.$message.success('宸叉垚鍔熷垹闄ら�変腑閭欢锛�')
+                this.queryMails()
+              }
+            })
+            .catch(err => {
+              console.log(err)
+            })
+        })
+        .catch(() => {
+          this.$message.info('宸插彇娑堝垹闄わ紒')
+        })
+    },
+    indexMethod(index) {
+      return (this.currentPage - 1) * this.pageSize + index + 1
+    },
+    formType(row, column, cellValue, index) {
+      if (cellValue == 1) {
+        return '涓汉閭欢'
+      } else {
+        return '缇ゅ彂閭欢'
+      }
+    },
+    formItems(row, column, cellValue, index) {
+      if (cellValue) {
+        const items = cellValue.map(item => {
+          return `${item.itemid}脳${item.itemnum}`
+        })
+        return items.join('锛�')
+      } else {
+        return '-'
+      }
+    },
+    formdate(row, column, cellValue, index) {
+      return cellValue ? moment(cellValue).format('YYYY-MM-DD HH:MM:SS') : '-'
+    },
+    rowClick(row, column, event) {
+      this.editReward(row)
+    },
+    tableSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    // pagination
+    sizeChange(val) {
+      this.pageSize = val
+      // this.queryMails()
+    },
+    pageChange(val) {
+      this.currentPage = val
+      // this.queryMails()
+    },
+
+    // modal
+    openModal() {
+      this.modalVisible = true
+    },
+    closeModal() {
+      this.clearValidate('modalForm')
+      this.modalVisible = false
+    },
+
+    saveMail(data) {
+      return new Promise((resolve, reject) => {
+        saveMail(data)
+          .then(res => {
+            const data = res.data
+            data.errcode === 0 ? resolve(data) : reject()
+          })
+          .catch(err => {
+            console.log(err)
+          })
+      })
+    },
+    openInnerModal() {
+      this.innerModalVisible = true
+    },
+    closeInnerModal() {
+      this.clearValidate('innerModalForm')
+      this.innerModalVisible = false
+    },
+    saveItem() {
+      const self = this
+      this.validateForm('innerModalForm')
+        .then(() => {
+          if (self.isNewItem) {
+            self.modalForm.attachments.push(self.innerModalForm)
+          } else {
+            self.modalForm.attachments.splice(self.curItem, 1, self.innerModalForm)
+          }
+          self.$message.success('宸叉垚鍔熶繚瀛橀檮浠剁墿鍝侊紒')
+          self.closeInnerModal()
+        })
+        .catch((err) => {
+          console.error(err)
+          self.$message.error('璇锋寜瑕佹眰濉啓琛ㄥ崟锛�')
+        })
+    },
+  }
+}
+</script>
+
+<style lang="sass" scoped>
+
+</style>
diff --git a/src/views/games/details/reward.vue b/src/views/games/details/reward.vue
index 671b291..9eeca88 100644
--- a/src/views/games/details/reward.vue
+++ b/src/views/games/details/reward.vue
@@ -554,7 +554,6 @@ export default {
         comment: ''
       }
     },
-    batchDel() {},
     batchOpt() {
       this.batch.show = !this.batch.show
       this.batch.txt = this.batch.show ? '鍏抽棴' : '鎵归噺鎿嶄綔'
diff --git a/vue.config.js b/vue.config.js
index 2b025c6..6e0999f 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -95,7 +95,8 @@ module.exports = {
     config
       // https://webpack.js.org/configuration/devtool/#development
       .when(process.env.NODE_ENV === 'development', config =>
-        config.devtool('cheap-source-map')
+        // config.devtool('cheap-source-map')
+        config.devtool('source-map')
       )
 
     config.when(process.env.NODE_ENV !== 'development', config => {