diff --git a/miniprogram_npm/dayjs/index.js b/miniprogram_npm/dayjs/index.js
index 3fa8603..1cf4e5e 100644
--- a/miniprogram_npm/dayjs/index.js
+++ b/miniprogram_npm/dayjs/index.js
@@ -4,10 +4,10 @@ var __DEFINE__ = function(modId, func, req) { var m = { exports: {}, _tempexport
 var __REQUIRE__ = function(modId, source) { if(!__MODS__[modId]) return require(source); if(!__MODS__[modId].status) { var m = __MODS__[modId].m; m._exports = m._tempexports; var desp = Object.getOwnPropertyDescriptor(m, "exports"); if (desp && desp.configurable) Object.defineProperty(m, "exports", { set: function (val) { if(typeof val === "object" && val !== m._exports) { m._exports.__proto__ = val.__proto__; Object.keys(val).forEach(function (k) { m._exports[k] = val[k]; }); } m._tempexports = val }, get: function () { return m._tempexports; } }); __MODS__[modId].status = 1; __MODS__[modId].func(__MODS__[modId].req, m, m.exports); } return __MODS__[modId].m.exports; };
 var __REQUIRE_WILDCARD__ = function(obj) { if(obj && obj.__esModule) { return obj; } else { var newObj = {}; if(obj != null) { for(var k in obj) { if (Object.prototype.hasOwnProperty.call(obj, k)) newObj[k] = obj[k]; } } newObj.default = obj; return newObj; } };
 var __REQUIRE_DEFAULT__ = function(obj) { return obj && obj.__esModule ? obj.default : obj; };
-__DEFINE__(1731653753936, function(require, module, exports) {
+__DEFINE__(1732151585865, function(require, module, exports) {
 !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).dayjs=e()}(this,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",c="month",f="quarter",h="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return"["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return!r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return(e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return-t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,c),s=n-i<0,u=e.clone().add(r+(s?-1:1),c);return+(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return{M:c,y:h,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:f}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p="$isDayjsObject",S=function(t){return t instanceof _||!(!t||!t[p])},w=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else{var a=e.name;D[a]=e,i=a}return!r&&i&&(g=i),i||!r&&g},O=function(t,e){if(S(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},b=v;b.l=w,b.i=S,b.w=function(t,e){return O(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=w(t.locale,null,!0),this.parse(t),this.$x=this.$x||t.x||{},this[p]=!0}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(b.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.init()},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds()},m.$utils=function(){return b},m.isValid=function(){return!(this.$d.toString()===l)},m.isSame=function(t,e){var n=O(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return O(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<O(t)},m.$g=function(t,e,n){return b.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!b.u(e)||e,f=b.p(t),l=function(t,e){var i=b.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return b.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(f){case h:return r?l(1,0):l(31,11);case c:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=b.p(t),f="set"+(this.$u?"UTC":""),l=(n={},n[a]=f+"Date",n[d]=f+"Date",n[c]=f+"Month",n[h]=f+"FullYear",n[u]=f+"Hours",n[s]=f+"Minutes",n[i]=f+"Seconds",n[r]=f+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===c||o===h){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[b.p(t)]()},m.add=function(r,f){var d,l=this;r=Number(r);var $=b.p(f),y=function(t){var e=O(l);return b.w(e.date(e.date()+Math.round(t*r)),l)};if($===c)return this.set(c,this.$M+r);if($===h)return this.set(h,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return b.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=b.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,c=n.months,f=n.meridiem,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},d=function(t){return b.s(s%12||12,t,"0")},$=f||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r};return r.replace(y,(function(t,r){return r||function(t){switch(t){case"YY":return String(e.$y).slice(-2);case"YYYY":return b.s(e.$y,4,"0");case"M":return a+1;case"MM":return b.s(a+1,2,"0");case"MMM":return h(n.monthsShort,a,c,3);case"MMMM":return h(c,a);case"D":return e.$D;case"DD":return b.s(e.$D,2,"0");case"d":return String(e.$W);case"dd":return h(n.weekdaysMin,e.$W,o,2);case"ddd":return h(n.weekdaysShort,e.$W,o,3);case"dddd":return o[e.$W];case"H":return String(s);case"HH":return b.s(s,2,"0");case"h":return d(1);case"hh":return d(2);case"a":return $(s,u,!0);case"A":return $(s,u,!1);case"m":return String(u);case"mm":return b.s(u,2,"0");case"s":return String(e.$s);case"ss":return b.s(e.$s,2,"0");case"SSS":return b.s(e.$ms,3,"0");case"Z":return i}return null}(t)||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=this,M=b.p(d),m=O(r),v=(m.utcOffset()-this.utcOffset())*e,g=this-m,D=function(){return b.m(y,m)};switch(M){case h:$=D()/12;break;case c:$=D();break;case f:$=D()/3;break;case o:$=(g-v)/6048e5;break;case a:$=(g-v)/864e5;break;case u:$=g/n;break;case s:$=g/e;break;case i:$=g/t;break;default:$=g}return l?$:b.a($)},m.daysInMonth=function(){return this.endOf(c).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=w(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return b.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),k=_.prototype;return O.prototype=k,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",c],["$y",h],["$D",d]].forEach((function(t){k[t[1]]=function(e){return this.$g(e,t[0],t[1])}})),O.extend=function(t,e){return t.$i||(t(e,_,O),t.$i=!0),O},O.locale=w,O.isDayjs=S,O.unix=function(t){return O(1e3*t)},O.en=D[g],O.Ls=D,O.p={},O}));
 }, function(modId) {var map = {}; return __REQUIRE__(map[modId], modId); })
-return __REQUIRE__(1731653753936);
+return __REQUIRE__(1732151585865);
 })()
 //miniprogram-npm-outsideDeps=[]
 //# sourceMappingURL=index.js.map
\ No newline at end of file
diff --git a/miniprogram_npm/fast-deep-equal/index.js b/miniprogram_npm/fast-deep-equal/index.js
index 909d591..b783e10 100644
--- a/miniprogram_npm/fast-deep-equal/index.js
+++ b/miniprogram_npm/fast-deep-equal/index.js
@@ -4,7 +4,7 @@ var __DEFINE__ = function(modId, func, req) { var m = { exports: {}, _tempexport
 var __REQUIRE__ = function(modId, source) { if(!__MODS__[modId]) return require(source); if(!__MODS__[modId].status) { var m = __MODS__[modId].m; m._exports = m._tempexports; var desp = Object.getOwnPropertyDescriptor(m, "exports"); if (desp && desp.configurable) Object.defineProperty(m, "exports", { set: function (val) { if(typeof val === "object" && val !== m._exports) { m._exports.__proto__ = val.__proto__; Object.keys(val).forEach(function (k) { m._exports[k] = val[k]; }); } m._tempexports = val }, get: function () { return m._tempexports; } }); __MODS__[modId].status = 1; __MODS__[modId].func(__MODS__[modId].req, m, m.exports); } return __MODS__[modId].m.exports; };
 var __REQUIRE_WILDCARD__ = function(obj) { if(obj && obj.__esModule) { return obj; } else { var newObj = {}; if(obj != null) { for(var k in obj) { if (Object.prototype.hasOwnProperty.call(obj, k)) newObj[k] = obj[k]; } } newObj.default = obj; return newObj; } };
 var __REQUIRE_DEFAULT__ = function(obj) { return obj && obj.__esModule ? obj.default : obj; };
-__DEFINE__(1731653753937, function(require, module, exports) {
+__DEFINE__(1732151585866, function(require, module, exports) {
 
 
 // do not edit .js files directly - edit src/index.jst
@@ -53,7 +53,7 @@ module.exports = function equal(a, b) {
 };
 
 }, function(modId) {var map = {}; return __REQUIRE__(map[modId], modId); })
-return __REQUIRE__(1731653753937);
+return __REQUIRE__(1732151585866);
 })()
 //miniprogram-npm-outsideDeps=[]
 //# sourceMappingURL=index.js.map
\ No newline at end of file
diff --git a/miniprogram_npm/rfdc/index.js b/miniprogram_npm/rfdc/index.js
index 1d62595..1f8d650 100644
--- a/miniprogram_npm/rfdc/index.js
+++ b/miniprogram_npm/rfdc/index.js
@@ -4,7 +4,7 @@ var __DEFINE__ = function(modId, func, req) { var m = { exports: {}, _tempexport
 var __REQUIRE__ = function(modId, source) { if(!__MODS__[modId]) return require(source); if(!__MODS__[modId].status) { var m = __MODS__[modId].m; m._exports = m._tempexports; var desp = Object.getOwnPropertyDescriptor(m, "exports"); if (desp && desp.configurable) Object.defineProperty(m, "exports", { set: function (val) { if(typeof val === "object" && val !== m._exports) { m._exports.__proto__ = val.__proto__; Object.keys(val).forEach(function (k) { m._exports[k] = val[k]; }); } m._tempexports = val }, get: function () { return m._tempexports; } }); __MODS__[modId].status = 1; __MODS__[modId].func(__MODS__[modId].req, m, m.exports); } return __MODS__[modId].m.exports; };
 var __REQUIRE_WILDCARD__ = function(obj) { if(obj && obj.__esModule) { return obj; } else { var newObj = {}; if(obj != null) { for(var k in obj) { if (Object.prototype.hasOwnProperty.call(obj, k)) newObj[k] = obj[k]; } } newObj.default = obj; return newObj; } };
 var __REQUIRE_DEFAULT__ = function(obj) { return obj && obj.__esModule ? obj.default : obj; };
-__DEFINE__(1731653753938, function(require, module, exports) {
+__DEFINE__(1732151585867, function(require, module, exports) {
 
 module.exports = rfdc
 
@@ -205,7 +205,7 @@ function rfdcCircles (opts) {
 }
 
 }, function(modId) {var map = {}; return __REQUIRE__(map[modId], modId); })
-return __REQUIRE__(1731653753938);
+return __REQUIRE__(1732151585867);
 })()
 //miniprogram-npm-outsideDeps=[]
 //# sourceMappingURL=index.js.map
\ No newline at end of file
diff --git a/miniprogram_npm/tinycolor2/index.js b/miniprogram_npm/tinycolor2/index.js
index e02ac56..1acbf9c 100644
--- a/miniprogram_npm/tinycolor2/index.js
+++ b/miniprogram_npm/tinycolor2/index.js
@@ -4,7 +4,7 @@ var __DEFINE__ = function(modId, func, req) { var m = { exports: {}, _tempexport
 var __REQUIRE__ = function(modId, source) { if(!__MODS__[modId]) return require(source); if(!__MODS__[modId].status) { var m = __MODS__[modId].m; m._exports = m._tempexports; var desp = Object.getOwnPropertyDescriptor(m, "exports"); if (desp && desp.configurable) Object.defineProperty(m, "exports", { set: function (val) { if(typeof val === "object" && val !== m._exports) { m._exports.__proto__ = val.__proto__; Object.keys(val).forEach(function (k) { m._exports[k] = val[k]; }); } m._tempexports = val }, get: function () { return m._tempexports; } }); __MODS__[modId].status = 1; __MODS__[modId].func(__MODS__[modId].req, m, m.exports); } return __MODS__[modId].m.exports; };
 var __REQUIRE_WILDCARD__ = function(obj) { if(obj && obj.__esModule) { return obj; } else { var newObj = {}; if(obj != null) { for(var k in obj) { if (Object.prototype.hasOwnProperty.call(obj, k)) newObj[k] = obj[k]; } } newObj.default = obj; return newObj; } };
 var __REQUIRE_DEFAULT__ = function(obj) { return obj && obj.__esModule ? obj.default : obj; };
-__DEFINE__(1731653753939, function(require, module, exports) {
+__DEFINE__(1732151585868, function(require, module, exports) {
 // This file is autogenerated. It's used to publish CJS to npm.
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -1195,7 +1195,7 @@ __DEFINE__(1731653753939, function(require, module, exports) {
 }));
 
 }, function(modId) {var map = {}; return __REQUIRE__(map[modId], modId); })
-return __REQUIRE__(1731653753939);
+return __REQUIRE__(1732151585868);
 })()
 //miniprogram-npm-outsideDeps=[]
 //# sourceMappingURL=index.js.map
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 0535b89..ab9ffda 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
+        "dayjs": "^1.11.13",
         "miniprogram-computed": "^5.1.0",
         "signalr-for-wx": "^1.1.6",
         "tdesign-miniprogram": "^1.7.1"
diff --git a/package.json b/package.json
index 412cefc..47af127 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "dayjs": "^1.11.13",
     "miniprogram-computed": "^5.1.0",
     "signalr-for-wx": "^1.1.6",
     "tdesign-miniprogram": "^1.7.1"
diff --git a/pages/form/index.ts b/pages/form/index.ts
index 11e2d41..9fc0c05 100644
--- a/pages/form/index.ts
+++ b/pages/form/index.ts
@@ -6,7 +6,7 @@ import { agora } from '../../utils/agora'
 Page({
   data: {
     meetingForm: {
-      roomNum: '27413452',
+      roomNum: '34351300',
       roomName: '杨杨',
     },
     isRecord: false,
diff --git a/pages/meeting/index.scss b/pages/meeting/index.scss
index 9c06719..7e1acf2 100644
--- a/pages/meeting/index.scss
+++ b/pages/meeting/index.scss
@@ -4,7 +4,7 @@
     display: flex;
     align-items: center;
     position: absolute;
-    z-index: 1;
+    z-index: 3;
     left: 6rpx;
     background-color: rgba(0, 0, 0, 0.4);
     border-radius: 4rpx;
@@ -56,7 +56,7 @@
       width: 100%;
       height: 100%;
       background-color: black;
-      z-index: 2;
+      z-index: 4;
 
       &-image {
         position: absolute;
@@ -71,6 +71,7 @@
     &-video {
       flex-grow: 1;
       position: relative;
+      background-color: black;
 
       &-avatar {
         position: absolute;
@@ -82,6 +83,16 @@
         width: 100%;
         height: 100%;
         background-color: black;
+        z-index: 2;
+      }
+
+      &-fullscreen {
+        position: absolute;
+        right: 2%;
+        top: 2%;
+        color: white;
+        z-index: 2;
+        background-color: rgba(0, 0, 0, 0.4);
       }
 
       &-canvas {
@@ -100,7 +111,6 @@
     }
 
     &-smallvideo {
-      width: 20%;
       overflow-y: auto;
 
       &-box {
@@ -117,10 +127,17 @@
           box-sizing: border-box;
 
           &-avatar {
+            border: 1px solid #7B96FF;
             position: absolute;
-            left: 50%;
-            top: 50%;
-            transform: translate(-50%, -50%) scale(0.4);
+            left: 4rpx;
+            top: 2rpx;
+            width: calc(100% - 8rpx);
+            height: calc(100% - 4rpx);
+            z-index: 2;
+            background-color: black;
+            display: flex;
+            align-items: center;
+            justify-content: center;
           }
 
           &-canvas {
@@ -175,16 +192,16 @@
         flex-direction: column;
         align-items: center;
         padding: 4rpx 0;
-        width: 70rpx;
+        width: 60rpx;
         box-sizing: border-box;
 
         &-image {
-          width: 32rpx;
-          height: 32rpx;
+          width: 22rpx;
+          height: 22rpx;
         }
 
         &-text {
-          font-size: 12rpx;
+          font-size: 10rpx;
           color: white;
         }
       }
@@ -202,15 +219,26 @@
   width: 30vw;
   height: 100vh;
   background-color: #16191E;
-  padding: 10rpx;
+  padding: 10rpx 0;
   box-sizing: border-box;
-  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+
+  &-title {
+    color: white;
+    text-align: center;
+    font-size: 16rpx;
+    flex-shrink: 0;
+    border-bottom: 1px rgb(59, 59, 59) solid;
+    padding-bottom: 10rpx;
+  }
 
   &-view {
+    overflow-y: auto;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 4rpx 0;
+    padding: 4rpx 10rpx;
 
     &-avatar {
       display: flex;
@@ -246,19 +274,43 @@
   width: 40vw;
   height: 100vh;
   background-color: #16191E;
-  padding: 10rpx;
+  padding: 10rpx 0;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
 
+  &-title {
+    color: white;
+    text-align: center;
+    border-bottom: 1px rgb(59, 59, 59) solid;
+    padding-bottom: 10rpx;
+    font-size: 16rpx;
+  }
+
   &-list {
     flex-grow: 1;
     overflow-y: auto;
+    padding: 0 10rpx;
 
     &-view {
       color: white;
       font-size: 14rpx;
-      margin-bottom: 4rpx;
+      margin-bottom: 6rpx;
+    }
+  }
+
+  &-button {
+    padding: 0 10rpx;
+    display: flex;
+    flex-wrap: wrap;
+
+    &-view {
+      margin: 0 0 4rpx 4rpx;
+      color: white;
+      font-size: 12rpx;
+      background-color: #5575F2;
+      padding: 4rpx 8rpx;
+      border-radius: 4rpx;
     }
   }
 
@@ -266,7 +318,8 @@
     flex-shrink: 0;
     display: flex;
     align-items: center;
-    margin-top: 10rpx;
+    padding: 10rpx 10rpx 0;
+    border-top: 1px rgb(59, 59, 59) solid;
 
     &-text {
       flex-grow: 1;
diff --git a/pages/meeting/index.ts b/pages/meeting/index.ts
index c98f398..71cc1d3 100644
--- a/pages/meeting/index.ts
+++ b/pages/meeting/index.ts
@@ -3,6 +3,7 @@ import { agora } from '../../utils/agora'
 import { onInvoke, onSignalr } from '../../utils/singlr'
 import { role, getStorage } from '../../utils/utils'
 import { Message } from 'tdesign-miniprogram';
+import dayjs from 'dayjs';
 const computedBehavior = require('miniprogram-computed').behavior;
 Page({
   behaviors: [computedBehavior],
@@ -14,6 +15,7 @@ Page({
         active: true,
         icon: '/assets/icon1.png',
         iconActive: '/assets/icon1-active.png',
+        show: false,
       },
       {
         title: '静音',
@@ -21,6 +23,7 @@ Page({
         active: false,
         icon: '/assets/icon2.png',
         iconActive: '/assets/icon2-active.png',
+        show: true,
       },
       {
         title: '关闭视频',
@@ -28,6 +31,7 @@ Page({
         active: false,
         icon: '/assets/icon3.png',
         iconActive: '/assets/icon3-active.png',
+        show: true,
       },
       {
         title: '翻转',
@@ -35,6 +39,7 @@ Page({
         active: true,
         icon: '/assets/icon4.png',
         iconActive: '/assets/icon4.png',
+        show: false,
       },
       {
         title: '聊天',
@@ -42,6 +47,7 @@ Page({
         active: true,
         icon: '/assets/icon5.png',
         iconActive: '/assets/icon5.png',
+        show: true,
       },
       {
         title: '成员',
@@ -49,6 +55,7 @@ Page({
         active: true,
         icon: '/assets/icon6.png',
         iconActive: '/assets/icon6.png',
+        show: true,
       },
       {
         title: '申请发言',
@@ -56,6 +63,7 @@ Page({
         active: true,
         icon: '/assets/icon7.png',
         iconActive: '/assets/icon7-active.png',
+        show: true,
       },
     ],
     channelId: '',
@@ -68,13 +76,20 @@ Page({
     userNumer: 0,
     noViewChatList: 0,
     applySpeakDialog: false,
+    leaveDialog: false,
     userPopupVisible: false,
     chatPopupVisible: false,
-    devicePosition: true,
+    isFullscreen: false,
     muted: false,
     currentRequestSpeakType: '',
     user: '',
-    messageStr: ''
+    messageStr: '',
+    commonlyChatList: [
+      '能听到我说话吗？',
+      '听得到',
+      '听不到',
+      '我要发言',
+    ]
   },
   watch: {
     'roomUserList.**': function (roomUserList) {
@@ -83,6 +98,13 @@ Page({
         userNumer: roomUserList.filter((item: any) => item.isRoom).length,
       })
     },
+    'footerList.**': function (footerList) {
+      const footerListTemplate = [...footerList];
+      footerListTemplate[3].show = !footerListTemplate[6].active
+      this.setData({
+        footerList: footerListTemplate
+      })
+    },
     'isClicked': function (isClicked) {
       if (isClicked) {
         let timer = setTimeout(() => {
@@ -99,6 +121,8 @@ Page({
       channelId: option.roomNum,
       user: await getStorage('user')
     })
+  },
+  async onReady() {
     await this.joinChannel()
     await this.getRoomUser()
     await this.getShowUser()
@@ -117,6 +141,7 @@ Page({
               noViewChatList: this.data.noViewChatList += 1
             })
           }
+          item.timestamp = dayjs(item.timestamp).format('HH:mm:ss')
           this.setData({
             chatList: [...this.data.chatList, item]
           })
@@ -128,12 +153,12 @@ Page({
         // 全员离开房间
         case 'AllLeave':
           this.message('管理员已结束会议!').success()
-          this.back()
+          wx.navigateBack()
           break;
         // 移出会议
         case 'ForceExitRoom':
           this.message('管理员已将你移出会议!').success()
-          this.back()
+          wx.navigateBack()
           break;
         // 更新视图模式
         case 'RefreshView':
@@ -498,9 +523,6 @@ Page({
       case '翻转':
         await this.getUserRoomInfo().then(async (res) => {
           if (res) {
-            this.setData({
-              devicePosition: !this.data.devicePosition
-            })
             wx.createLivePusherContext().switchCamera()
           } else {
             this.message('暂无权限').error();
@@ -552,13 +574,13 @@ Page({
       this.message('操作成功').success()
     }
   },
-  closeDialog(e) {
+  async closeDialog(e) {
     const { type } = e.currentTarget.dataset;
     switch (e.type) {
       case "confirm":
         switch (type) {
           case "applySpeakDialog":
-            GetApplySpeak(this.data.channelId).then(res => {
+            await GetApplySpeak(this.data.channelId).then(res => {
               if (res.code === 200) {
                 this.setData({
                   isClicked: true,
@@ -568,6 +590,9 @@ Page({
               }
             })
             break;
+          case "leaveDialog":
+            wx.navigateBack()
+            break;
         }
         break;
       case "cancel":
@@ -639,8 +664,10 @@ Page({
       }
     });
   },
-  back() {
-    wx.navigateBack()
+  async back() {
+    this.setData({
+      leaveDialog: true
+    })
   },
   onVisibleChange() {
     this.setData({
@@ -653,18 +680,28 @@ Page({
       messageStr: e.detail.value
     })
   },
-  async sendMeg() {
-    await onInvoke('sendChannelMsg', {
-      roomNum: this.data.channelId,
-      msg: this.data.messageStr
-    })
+  async sendMeg(e) {
+    if (this.data.messageStr || e.target.dataset.item) {
+      await onInvoke('sendChannelMsg', {
+        roomNum: this.data.channelId,
+        msg: e.target.dataset.item || this.data.messageStr
+      })
+      this.setData({
+        chatList: [...this.data.chatList, {
+          userName: this.data.user.userName,
+          message: e.target.dataset.item || this.data.messageStr,
+          timestamp: dayjs(+new Date()).format('HH:mm:ss'),
+          me: true
+        }],
+        messageStr: ''
+      })
+    } else {
+      this.message('请输入文字！').error()
+    }
+  },
+  changeFullscreen() {
     this.setData({
-      chatList: [...this.data.chatList, {
-        userName: this.data.user.userName,
-        message: this.data.messageStr,
-        me: true
-      }],
-      messageStr: ''
+      isFullscreen: !this.data.isFullscreen
     })
   }
 })
\ No newline at end of file
diff --git a/pages/meeting/index.wxml b/pages/meeting/index.wxml
index 38c1925..ece14ef 100644
--- a/pages/meeting/index.wxml
+++ b/pages/meeting/index.wxml
@@ -1,18 +1,22 @@
 <!--pages/meeting/index.wxml-->
 <view class="meeting">
-  <header-tab title='会议' backGround='rgb(35,36,38)' iconSize='24' color="white" titleStyle='padding:12rpx 0;' isStatusBarHeight="{{false}}"></header-tab>
+  <header-tab title='会议' backGround='rgb(35,36,38)' iconSize='24' color="white" titleStyle='padding:12rpx 0;' isStatusBarHeight="{{false}}" isBack='{{false}}'></header-tab>
   <view class="meeting-content">
     <view class="meeting-content-noAdmin" wx:if="{{isAdmin === 0}}">
       <image class="meeting-content-noAdmin-image" src="/assets/icon8.png" />
     </view>
     <view class="meeting-content-video">
-      <view class="meeting-content-video-avatar">
+      <view class="meeting-content-video-avatar" wx:if="{{!currentUser.enableCamera && !currentUser.shareSrc}}">
         <t-avatar size="small">{{currentUser.avatarName}}</t-avatar>
       </view>
+      <view class="meeting-content-video-fullscreen" bind:tap="changeFullscreen">
+        <t-icon name="fullscreen-exit" size="24rpx" data-name="fullscreen-exit" wx:if="{{isFullscreen}}" />
+        <t-icon name="fullscreen-2" size="24rpx" data-name="fullscreen-2" wx:else />
+      </view>
       <view class="meeting-content-video-canvas" wx:if="{{currentUser.shareSrc}}">
         <live-player id="player" src="{{currentUser.shareSrc}}" mode="RTC" autoplay="true" bindstatechange="playerStateChange" object-fit="contain" muted="{{muted}}" />
       </view>
-      <view class="meeting-content-video-canvas" wx:elif="{{currentUser.enableCamera && currentUser.src}}">
+      <view class="meeting-content-video-canvas" wx:elif="{{currentUser.src}}">
         <live-player id="player" src="{{currentUser.src}}" mode="RTC" autoplay="true" bindstatechange="playerStateChange" object-fit="fillCrop" muted="{{muted}}" />
       </view>
       <view class="meeting-content-video-user">
@@ -23,14 +27,16 @@
         <text class="meeting-content-video-user-text">{{currentUser.userName}}</text>
       </view>
     </view>
-    <view class="meeting-content-smallvideo">
-      <view class="meeting-content-smallvideo-box" wx:for="{{roomUserList}}" data-item="{{item}}" wx:key="index" bind:tap="clickChangeVideo" wx:if="{{item.isRoom && item.isAdmin}}">
+    <view class="meeting-content-smallvideo" style="width: {{isFullscreen ? '0' :'20%'}}">
+      <view class="meeting-content-smallvideo-box" id="video-{{item.uid}}" wx:for="{{roomUserList}}" data-item="{{item}}" wx:key="index" bind:tap="clickChangeVideo" wx:if="{{item.isRoom && item.isAdmin}}">
         <view class="meeting-content-smallvideo-box-view {{item.uid == currentUid || item.screenShareId == currentUid ? 'active' : ''}}">
-          <view class="meeting-content-smallvideo-box-view-avatar">
-            <t-avatar size="small">{{item.avatarName}}</t-avatar>
+          <view class="meeting-content-smallvideo-box-view-avatar {{item.uid == currentUid || item.screenShareId == currentUid ? 'active' : ''}}" wx:if="{{!item.enableCamera}}">
+            <view style="transform:scale(0.4);">
+              <t-avatar size="small">{{item.avatarName}}</t-avatar>
+            </view>
           </view>
-          <view class="meeting-content-smallvideo-box-view-canvas" wx:if="{{item.enableCamera && item.src}}">
-            <live-pusher wx:if="{{user.uid === item.uid}}" url="{{item.src}}" mode="RTC" bindstatechange="recorderStateChange" background-mute enable-mic enable-camera max-bitrate="500" min-bitrate="200" autopush device-position="front" class="meeting-content-smallvideo-box-view-canvas-play" />
+          <view class="meeting-content-smallvideo-box-view-canvas" wx:if="{{item.src}}">
+            <live-pusher wx:if="{{user.uid === item.uid}}" url="{{item.src}}" mode="RTC" bindstatechange="recorderStateChange" background-mute enable-mic enable-camera max-bitrate="500" min-bitrate="200" autopush enable-agc enable-ans device-position="front" class="meeting-content-smallvideo-box-view-canvas-play" />
             <live-player src="{{item.src}}" class="meeting-content-smallvideo-box-view-canvas-play" mode="RTC" autoplay="true" bindstatechange="playerStateChange" object-fit="fillCrop" muted="{{muted}}" wx:else />
           </view>
           <view class="meeting-content-smallvideo-box-view-user">
@@ -47,12 +53,12 @@
       </view>
     </view>
   </view>
-  <view class="meeting-footer">
+  <view class="meeting-footer" wx:if="{{!isFullscreen}}">
     <view class="meeting-footer-left">
-      <view class="meeting-footer-left-view" wx:for="{{footerList}}" wx:for-index="index" wx:for-item="item" wx:key="index" bind:tap="changeFooterList" data-index='{{index}}'>
+      <view class="meeting-footer-left-view" wx:for="{{footerList}}" wx:for-index="index" wx:for-item="item" wx:key="index" bind:tap="changeFooterList" data-index='{{index}}' wx:if="{{item.show}}">
         <image class="meeting-footer-left-view-image" src="{{item.active ? item.icon : item.iconActive}}" />
         <text class="meeting-footer-left-view-text" wx:if="{{item.title === '成员'}}">{{item.title}}({{userNumer}}) </text>
-        <text class="meeting-footer-left-view-text" wx:elif="{{item.title === '翻转'}}">{{item.title}}({{devicePosition ? '前置' : '后置'}}) </text>
+        <text class="meeting-footer-left-view-text" wx:elif="{{item.title === '翻转'}}">{{item.title}}</text>
         <text class="meeting-footer-left-view-text" wx:elif="{{item.title === '聊天'}}">{{item.title}}{{noViewChatList ? '('+noViewChatList+')' : '' }}
         </text>
         <text class="meeting-footer-left-view-text" wx:else>{{item.active ? item.title : item.titleActive}}</text>
@@ -65,31 +71,45 @@
 </view>
 <t-message id="t-message" />
 <t-dialog visible="{{applySpeakDialog}}" content="该操作需向管理员申请发言权限" confirm-btn="{{ { content: '确定', variant: 'base', theme: 'primary' } }}" cancel-btn="取消" data-type="applySpeakDialog" bind:confirm="closeDialog" bind:cancel="closeDialog" style="transform: scale(0.5) translate3d(-50%, -50%, 0);" close-btn="{{false}}" />
+<t-dialog visible="{{leaveDialog}}" content="确定离开房间吗？" confirm-btn="{{ { content: '确定', variant: 'base', theme: 'primary' } }}" cancel-btn="取消" data-type="leaveDialog" bind:confirm="closeDialog" bind:cancel="closeDialog" style="transform: scale(0.5) translate3d(-50%, -50%, 0);" close-btn="{{false}}" />
 <t-popup visible="{{userPopupVisible}}" bind:visible-change="onVisibleChange" placement="right" prevent-scroll-through='{{false}}'>
   <view class="user-popup">
+    <view class="user-popup-title">
+      聊天
+    </view>
     <view class="user-popup-view" wx:for="{{roomUserList}}" data-item="{{item}}" wx:key="index" wx:if="{{item.isRoom}}">
       <view class="user-popup-view-avatar">
         <t-avatar size="36rpx">{{item.avatarName}}</t-avatar>
         <text class="user-popup-view-avatar-text">{{item.userName}}</text>
       </view>
       <view class="user-popup-view-image">
-        <image src="/assets/{{currentUser.enableMicr ? 'icon2' : 'icon2-active'}}.png" class="user-popup-view-image-icon" />
-        <image src="/assets/{{currentUser.enableCamera ? 'icon3' : 'icon3-active'}}.png" class="user-popup-view-image-icon" />
+        <image src="/assets/{{item.enableMicr ? 'icon2' : 'icon2-active'}}.png" class="user-popup-view-image-icon" />
+        <image src="/assets/{{item.enableCamera ? 'icon3' : 'icon3-active'}}.png" class="user-popup-view-image-icon" />
       </view>
     </view>
   </view>
 </t-popup>
 <t-popup visible="{{chatPopupVisible}}" bind:visible-change="onVisibleChange" placement="right" prevent-scroll-through='{{false}}'>
   <view class="chat-popup">
+    <view class="chat-popup-title">
+      聊天
+    </view>
     <view class="chat-popup-list" id="chatView">
       <view class="chat-popup-list-view" wx:for="{{chatList}}" data-item="{{item}}" wx:key="index" style="text-align: {{item.me ? 'right' : 'left'}}">
-        <text class="chat-popup-list-view-text">{{item.me ? item.message : item.userName}}</text>
-        <text class="chat-popup-list-view-text">：</text>
-        <text class="chat-popup-list-view-text">{{item.me ? item.userName : item.message}}</text>
+        <text style="color: #666;font-size: 10rpx;margin-right: 4rpx;" wx:if="{{item.me}}">({{item.timestamp}})</text>
+        <text>{{item.me ? item.message : item.userName}}</text>
+        <text>：</text>
+        <text>{{item.me ? item.userName : item.message}}</text>
+        <text style="color: #666;font-size: 10rpx;margin-left: 4rpx;" wx:if="{{!item.me}}">({{item.timestamp}})</text>
+      </view>
+    </view>
+    <view class="chat-popup-button">
+      <view wx:for="{{commonlyChatList}}" data-item="{{item}}" wx:key="index" class="chat-popup-button-view" bind:tap="sendMeg">
+        {{item}}
       </view>
     </view>
     <view class="chat-popup-input">
-      <input type="text" placeholder="请输入文字" class="chat-popup-input-text" value="{{messageStr}}" bind:change="changeMessageStr" />
+      <input type="text" placeholder="请输入文字" class="chat-popup-input-text" value="{{messageStr}}" bind:input="changeMessageStr" />
       <view class="chat-popup-input-submit" bind:tap="sendMeg">发送</view>
     </view>
   </view>
diff --git a/project.private.config.json b/project.private.config.json
index 7fc66f3..d03c56f 100644
--- a/project.private.config.json
+++ b/project.private.config.json
@@ -4,5 +4,6 @@
     "setting": {
         "compileHotReLoad": true,
         "urlCheck": true
-    }
+    },
+    "libVersion": "3.6.5"
 }
\ No newline at end of file
diff --git a/utils/agora.ts b/utils/agora.ts
index e0000e9..f3e1917 100644
--- a/utils/agora.ts
+++ b/utils/agora.ts
@@ -17,6 +17,7 @@ export const agora = {
   // 销毁
   destroy: async () => {
     if (client) {
+      await client.leave()
       await client.destroy()
       client = '';
     }
@@ -46,6 +47,7 @@ export const agora = {
       agora.setRole(false)
     })
   },
+  // 监听
   clientEvent: ({ streamAdded, streamRemoved }) => {
     client.on("stream-added", async e => {
       await agora.subscribe(e.uid, (url: string, uid: number | string) => {
@@ -56,14 +58,17 @@ export const agora = {
       streamRemoved(e.uid)
     });
   },
+  // 订阅远端音视频流
   subscribe: async (uid: number | string, callBack: Function) => {
     const { url, rotation } = await client.subscribe(uid)
     callBack(url, uid)
   },
+  // 停止发送本地音视频流
   muteLocal: async (target: string) => {
-    client.muteLocal(target)
+    await client.muteLocal(target)
   },
+  // 恢复发送本地音视频流
   unmuteLocal: async (target: string) => {
-    client.unmuteLocal(target)
+    await client.unmuteLocal(target)
   },
 }
\ No newline at end of file