update css

dist/app.js

@@ -27,10 +27,10 @@ require("./runtime");
   \*****************************************************************************************/
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
-/* harmony import */ var _Users_Work_taro_node_modules_babel_runtime_helpers_esm_classCallCheck_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./node_modules/@babel/runtime/helpers/esm/classCallCheck.js */ "./node_modules/@babel/runtime/helpers/esm/classCallCheck.js");
-/* harmony import */ var _Users_Work_taro_node_modules_babel_runtime_helpers_esm_createClass_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./node_modules/@babel/runtime/helpers/esm/createClass.js */ "./node_modules/@babel/runtime/helpers/esm/createClass.js");
-/* harmony import */ var _Users_Work_taro_node_modules_babel_runtime_helpers_esm_inherits_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./node_modules/@babel/runtime/helpers/esm/inherits.js */ "./node_modules/@babel/runtime/helpers/esm/inherits.js");
-/* harmony import */ var _Users_Work_taro_node_modules_babel_runtime_helpers_esm_createSuper_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./node_modules/@babel/runtime/helpers/esm/createSuper.js */ "./node_modules/@babel/runtime/helpers/esm/createSuper.js");
+/* harmony import */ var _Users_Work_hola2_node_modules_babel_runtime_helpers_esm_classCallCheck_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./node_modules/@babel/runtime/helpers/esm/classCallCheck.js */ "./node_modules/@babel/runtime/helpers/esm/classCallCheck.js");
+/* harmony import */ var _Users_Work_hola2_node_modules_babel_runtime_helpers_esm_createClass_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./node_modules/@babel/runtime/helpers/esm/createClass.js */ "./node_modules/@babel/runtime/helpers/esm/createClass.js");
+/* harmony import */ var _Users_Work_hola2_node_modules_babel_runtime_helpers_esm_inherits_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./node_modules/@babel/runtime/helpers/esm/inherits.js */ "./node_modules/@babel/runtime/helpers/esm/inherits.js");
+/* harmony import */ var _Users_Work_hola2_node_modules_babel_runtime_helpers_esm_createSuper_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./node_modules/@babel/runtime/helpers/esm/createSuper.js */ "./node_modules/@babel/runtime/helpers/esm/createSuper.js");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "webpack/container/remote/react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _context_locales_index__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./context/locales/index */ "./src/context/locales/index.ts");
@@ -42,13 +42,13 @@ require("./runtime");
 
 
 var App = /*#__PURE__*/function (_Component) {
-  (0,_Users_Work_taro_node_modules_babel_runtime_helpers_esm_inherits_js__WEBPACK_IMPORTED_MODULE_2__["default"])(App, _Component);
-  var _super = (0,_Users_Work_taro_node_modules_babel_runtime_helpers_esm_createSuper_js__WEBPACK_IMPORTED_MODULE_3__["default"])(App);
+  (0,_Users_Work_hola2_node_modules_babel_runtime_helpers_esm_inherits_js__WEBPACK_IMPORTED_MODULE_2__["default"])(App, _Component);
+  var _super = (0,_Users_Work_hola2_node_modules_babel_runtime_helpers_esm_createSuper_js__WEBPACK_IMPORTED_MODULE_3__["default"])(App);
   function App() {
-    (0,_Users_Work_taro_node_modules_babel_runtime_helpers_esm_classCallCheck_js__WEBPACK_IMPORTED_MODULE_4__["default"])(this, App);
+    (0,_Users_Work_hola2_node_modules_babel_runtime_helpers_esm_classCallCheck_js__WEBPACK_IMPORTED_MODULE_4__["default"])(this, App);
     return _super.apply(this, arguments);
   }
-  (0,_Users_Work_taro_node_modules_babel_runtime_helpers_esm_createClass_js__WEBPACK_IMPORTED_MODULE_5__["default"])(App, [{
+  (0,_Users_Work_hola2_node_modules_babel_runtime_helpers_esm_createClass_js__WEBPACK_IMPORTED_MODULE_5__["default"])(App, [{
     key: "componentDidMount",
     value: function componentDidMount() {}
   }, {

dist/common.js

@@ -10,7 +10,7 @@
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": function() { return /* binding */ Buttons; }
 /* harmony export */ });
-/* harmony import */ var _Users_Work_taro_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./node_modules/@babel/runtime/helpers/esm/objectSpread2.js */ "./node_modules/@babel/runtime/helpers/esm/objectSpread2.js");
+/* harmony import */ var _Users_Work_hola2_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./node_modules/@babel/runtime/helpers/esm/objectSpread2.js */ "./node_modules/@babel/runtime/helpers/esm/objectSpread2.js");
 /* harmony import */ var _tarojs_components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @tarojs/components */ "./node_modules/@tarojs/plugin-platform-weapp/dist/components-react.js");
 /* harmony import */ var _utils_types__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../utils/types */ "./src/utils/types.ts");
 /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react/jsx-runtime */ "webpack/container/remote/react/jsx-runtime");
@@ -25,9 +25,10 @@ function Buttons(props) {
     opacity: 0.4
   } : {};
   return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_2__.View, {
-    style: (0,_Users_Work_taro_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__["default"])((0,_Users_Work_taro_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__["default"])({}, myStyle), props.style),
+    style: (0,_Users_Work_hola2_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__["default"])({}, myStyle),
     children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_2__.Button, {
       className: props.type == _utils_types__WEBPACK_IMPORTED_MODULE_0__.ButtonType.outline ? 'outline_btn' : 'btn',
+      style: (0,_Users_Work_hola2_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__["default"])({}, props.style),
       onClick: props.onClick,
       children: props.title
     })
@@ -162,7 +163,7 @@ function Rings(props) {
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": function() { return /* binding */ Component; }
 /* harmony export */ });
-/* harmony import */ var _Users_Work_taro_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./node_modules/@babel/runtime/helpers/esm/slicedToArray.js */ "./node_modules/@babel/runtime/helpers/esm/slicedToArray.js");
+/* harmony import */ var _Users_Work_hola2_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./node_modules/@babel/runtime/helpers/esm/slicedToArray.js */ "./node_modules/@babel/runtime/helpers/esm/slicedToArray.js");
 /* harmony import */ var _tarojs_components__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @tarojs/components */ "./node_modules/@tarojs/plugin-platform-weapp/dist/components-react.js");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "webpack/container/remote/react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
@@ -178,18 +179,24 @@ function Rings(props) {
 
 function Component(props) {
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(-1),
-    _useState2 = (0,_Users_Work_taro_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_3__["default"])(_useState, 2),
+    _useState2 = (0,_Users_Work_hola2_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_3__["default"])(_useState, 2),
     selIndex = _useState2[0],
     setSelIndex = _useState2[1];
   function isString(variable) {
     return typeof variable === 'string';
   }
+  function itemClick(index) {
+    setSelIndex(index);
+    if (props.itemSelect) {
+      props.itemSelect(index);
+    }
+  }
   return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_4__.View, {
     children: props.items.map(function (item, index) {
       return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_tarojs_components__WEBPACK_IMPORTED_MODULE_4__.View, {
         className: selIndex == index ? 'item item_select' : 'item',
         onClick: function onClick() {
-          return setSelIndex(index);
+          return itemClick(index);
         },
         children: [isString(item) ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_4__.Text, {
           style: {

dist/pages/Auth.js

@@ -67,7 +67,7 @@ function Component(props) {
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": function() { return /* binding */ Component; }
 /* harmony export */ });
-/* harmony import */ var _Users_Work_taro_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./node_modules/@babel/runtime/helpers/esm/slicedToArray.js */ "./node_modules/@babel/runtime/helpers/esm/slicedToArray.js");
+/* harmony import */ var _Users_Work_hola2_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./node_modules/@babel/runtime/helpers/esm/slicedToArray.js */ "./node_modules/@babel/runtime/helpers/esm/slicedToArray.js");
 /* harmony import */ var _tarojs_components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @tarojs/components */ "./node_modules/@tarojs/plugin-platform-weapp/dist/components-react.js");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "webpack/container/remote/react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
@@ -80,7 +80,7 @@ function Component(props) {
 
 function Component(props) {
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),
-    _useState2 = (0,_Users_Work_taro_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_2__["default"])(_useState, 2),
+    _useState2 = (0,_Users_Work_hola2_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_2__["default"])(_useState, 2),
     isFocus = _useState2[0],
     setIsFocus = _useState2[1];
   return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_3__.View, {

dist/pages/ChooseAuth.wxss

@@ -0,0 +1 @@
+/* pages/ChooseAuth.wxss */

dist/pages/ChooseScenario.js

@@ -59,7 +59,9 @@ function Component(props) {
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": function() { return /* binding */ Component; }
 /* harmony export */ });
-/* harmony import */ var _tarojs_components__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @tarojs/components */ "./node_modules/@tarojs/plugin-platform-weapp/dist/components-react.js");
+/* harmony import */ var _Users_Work_hola2_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./node_modules/@babel/runtime/helpers/esm/objectSpread2.js */ "./node_modules/@babel/runtime/helpers/esm/objectSpread2.js");
+/* harmony import */ var _Users_Work_hola2_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./node_modules/@babel/runtime/helpers/esm/slicedToArray.js */ "./node_modules/@babel/runtime/helpers/esm/slicedToArray.js");
+/* harmony import */ var _tarojs_components__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @tarojs/components */ "./node_modules/@tarojs/plugin-platform-weapp/dist/components-react.js");
 /* harmony import */ var _components_Buttons__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @components/Buttons */ "./src/components/Buttons.tsx");
 /* harmony import */ var _components_Texts__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @components/Texts */ "./src/components/Texts.tsx");
 /* harmony import */ var _components_Rings__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../components/Rings */ "./src/components/Rings.weapp.tsx");
@@ -68,8 +70,14 @@ function Component(props) {
 /* harmony import */ var _utils_types__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @utils/types */ "./src/utils/types.ts");
 /* harmony import */ var react_i18next__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! react-i18next */ "webpack/container/remote/react-i18next");
 /* harmony import */ var react_i18next__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(react_i18next__WEBPACK_IMPORTED_MODULE_6__);
-/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! react/jsx-runtime */ "webpack/container/remote/react/jsx-runtime");
-/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! react */ "webpack/container/remote/react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_7__);
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! react/jsx-runtime */ "webpack/container/remote/react/jsx-runtime");
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__);
+
+
+
+
 
 
 
@@ -83,89 +91,151 @@ function Component(props) {
 function Component() {
   var _useTranslation = (0,react_i18next__WEBPACK_IMPORTED_MODULE_6__.useTranslation)(),
     t = _useTranslation.t;
+  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_7__.useState)(0),
+    _useState2 = (0,_Users_Work_hola2_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_9__["default"])(_useState, 2),
+    selIndex = _useState2[0],
+    setSelIndex = _useState2[1];
   function login() {
     // Taro.navigateTo({
     //     url: '/pages/ChooseScenario'
     // })
   }
   function footerContent() {
-    return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_8__.View, {
-      children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_components_Buttons__WEBPACK_IMPORTED_MODULE_0__["default"], {
+    var style = {};
+    switch (selIndex) {
+      case 0:
+        style = {
+          backgroundColor: '#AAFF00'
+        };
+        break;
+      case 1:
+        style = {
+          backgroundColor: '#00FFFF'
+        };
+        break;
+      case 2:
+        style = {
+          background: 'linear-gradient(to right, #AAFF00, #00FFFF)'
+        };
+        break;
+    }
+    return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
+      children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_components_Buttons__WEBPACK_IMPORTED_MODULE_0__["default"], {
         title: "Login",
-        onClick: login
+        onClick: login,
+        style: (0,_Users_Work_hola2_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_11__["default"])((0,_Users_Work_hola2_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_11__["default"])({}, style), {}, {
+          width: 320
+        })
       })
     });
   }
   function items() {
     var array = [];
-    array.push( /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_8__.View, {
-      children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_components_Rings__WEBPACK_IMPORTED_MODULE_2__["default"], {
+    array.push( /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsxs)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
+      className: "item_row",
+      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_components_Rings__WEBPACK_IMPORTED_MODULE_2__["default"], {
         radius: 33,
         strokeWidth: 8,
         color: "#AAFF00",
         canvasId: "0"
-      })
+      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
+        className: "item_txt_bg",
+        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.Text, {
+          className: "item_txt",
+          style: {
+            color: '#AAFF00'
+          },
+          children: t('page.choose_scenario.fast')
+        })
+      })]
     }));
-    array.push( /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_8__.View, {
-      children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_components_Rings__WEBPACK_IMPORTED_MODULE_2__["default"], {
+    array.push( /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsxs)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
+      className: "item_row",
+      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_components_Rings__WEBPACK_IMPORTED_MODULE_2__["default"], {
         radius: 33,
         strokeWidth: 8,
         color: "#00FFFF",
         canvasId: "1"
-      })
+      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
+        className: "item_txt_bg",
+        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.Text, {
+          className: "item_txt",
+          style: {
+            color: '#00FFFF'
+          },
+          children: t('page.choose_scenario.sleep')
+        })
+      })]
     }));
-    array.push( /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(_tarojs_components__WEBPACK_IMPORTED_MODULE_8__.View, {
-      style: {
-        position: 'relative',
-        zIndex: 1
-      },
-      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_components_Rings__WEBPACK_IMPORTED_MODULE_2__["default"], {
-        radius: 33,
-        strokeWidth: 8,
-        color: "#AAFF00",
-        canvasId: "3"
-      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_8__.View, {
+    array.push( /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsxs)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
+      className: "item_row",
+      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsxs)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
         style: {
-          display: 'flex',
-          position: 'absolute',
-          left: 0,
-          right: 0,
-          top: 0,
-          bottom: 0,
-          alignItems: 'center',
-          justifyContent: 'center'
+          position: 'relative',
+          zIndex: 1
         },
-        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_components_Rings__WEBPACK_IMPORTED_MODULE_2__["default"], {
-          radius: 23,
-          strokeWidth: 6,
-          color: "#00FFFF",
-          canvasId: "4"
+        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_components_Rings__WEBPACK_IMPORTED_MODULE_2__["default"], {
+          radius: 33,
+          strokeWidth: 8,
+          color: "#AAFF00",
+          canvasId: "3"
+        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
+          style: {
+            display: 'flex',
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            top: 0,
+            bottom: 0,
+            alignItems: 'center',
+            justifyContent: 'center'
+          },
+          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_components_Rings__WEBPACK_IMPORTED_MODULE_2__["default"], {
+            radius: 23,
+            strokeWidth: 6,
+            color: "#00FFFF",
+            canvasId: "4"
+          })
+        })]
+      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
+        className: "item_txt_bg",
+        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.Text, {
+          className: "item_txt",
+          style: {
+            color: '#00FFFF'
+          },
+          children: t('page.choose_scenario.fast_sleep')
         })
       })]
     }));
     return array;
   }
-  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(_tarojs_components__WEBPACK_IMPORTED_MODULE_8__.View, {
+  function handleItemSelect(index) {
+    console.log('handleItemSelect', index);
+    setSelIndex(index);
+  }
+  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsxs)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
     className: "container",
-    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_components_Texts__WEBPACK_IMPORTED_MODULE_1__["default"], {
+    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_components_Texts__WEBPACK_IMPORTED_MODULE_1__["default"], {
       text: t('page.choose_scenario.title'),
       type: _utils_types__WEBPACK_IMPORTED_MODULE_5__.TextType.primary
-    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_components_Texts__WEBPACK_IMPORTED_MODULE_1__["default"], {
+    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_components_Texts__WEBPACK_IMPORTED_MODULE_1__["default"], {
       text: t('page.choose_scenario.sub_title'),
       type: _utils_types__WEBPACK_IMPORTED_MODULE_5__.TextType.secondary
-    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_8__.View, {
+    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
       style: {
         height: 20
       }
-    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_8__.View, {
+    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
       style: {
         position: 'relative',
         zIndex: 1
       },
-      children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_components_SingleSelect__WEBPACK_IMPORTED_MODULE_4__["default"], {
-        items: items()
+      children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_components_SingleSelect__WEBPACK_IMPORTED_MODULE_4__["default"], {
+        items: items(),
+        itemSelect: handleItemSelect
       })
-    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_components_Footer__WEBPACK_IMPORTED_MODULE_3__["default"], {
+    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_components_Footer__WEBPACK_IMPORTED_MODULE_3__["default"], {
       child: footerContent()
     })]
   });

dist/pages/ChooseScenario.wxss

@@ -26,3 +26,27 @@
   background: -webkit-linear-gradient(top, red, blue);
   background: linear-gradient(180deg, red, blue);
 }
+/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[4]!./src/features/trackTimeDuration/components/ChooseScenario.scss ***!
+  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
+.item_row {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+.item_txt_bg {
+  position: relative;
+  margin-left: 60rpx;
+}
+
+.item_txt {
+  font-size: 48rpx;
+  font-weight: 500;
+}

dist/pages/SetGoal.wxss

@@ -0,0 +1 @@
+/* pages/SetGoal.wxss */

dist/prebundle/remoteEntry.js

@@ -15,15 +15,15 @@ var moduleMap = {
 	"./@tarojs/taro": function() {
 		return Promise.all([__webpack_require__.e("vendors-node_modules_taro_weapp_prebundle_chunk-77KB62LY_js"), __webpack_require__.e("vendors-node_modules_taro_weapp_prebundle_chunk-3EXGJ5BE_js"), __webpack_require__.e("vendors-node_modules_taro_weapp_prebundle_tarojs_taro_js")]).then(function() { return function() { return (__webpack_require__(/*! ./node_modules/.taro/weapp/prebundle/@tarojs_taro.js */ "./node_modules/.taro/weapp/prebundle/@tarojs_taro.js")); }; });
 	},
+	"./react-i18next": function() {
+		return Promise.all([__webpack_require__.e("vendors-node_modules_taro_weapp_prebundle_chunk-LNJCN3VW_js"), __webpack_require__.e("vendors-node_modules_taro_weapp_prebundle_react-i18next_js")]).then(function() { return function() { return (__webpack_require__(/*! ./node_modules/.taro/weapp/prebundle/react-i18next.js */ "./node_modules/.taro/weapp/prebundle/react-i18next.js")); }; });
+	},
 	"./i18next-browser-languagedetector": function() {
 		return Promise.all([__webpack_require__.e("vendors-node_modules_taro_weapp_prebundle_chunk-77KB62LY_js"), __webpack_require__.e("vendors-node_modules_taro_weapp_prebundle_chunk-3EXGJ5BE_js"), __webpack_require__.e("vendors-node_modules_taro_weapp_prebundle_i18next-browser-languagedetector_js")]).then(function() { return function() { return (__webpack_require__(/*! ./node_modules/.taro/weapp/prebundle/i18next-browser-languagedetector.js */ "./node_modules/.taro/weapp/prebundle/i18next-browser-languagedetector.js")); }; });
 	},
 	"./i18next": function() {
 		return __webpack_require__.e("vendors-node_modules_taro_weapp_prebundle_i18next_js").then(function() { return function() { return (__webpack_require__(/*! ./node_modules/.taro/weapp/prebundle/i18next.js */ "./node_modules/.taro/weapp/prebundle/i18next.js")); }; });
 	},
-	"./react-i18next": function() {
-		return Promise.all([__webpack_require__.e("vendors-node_modules_taro_weapp_prebundle_chunk-LNJCN3VW_js"), __webpack_require__.e("vendors-node_modules_taro_weapp_prebundle_react-i18next_js")]).then(function() { return function() { return (__webpack_require__(/*! ./node_modules/.taro/weapp/prebundle/react-i18next.js */ "./node_modules/.taro/weapp/prebundle/react-i18next.js")); }; });
-	},
 	"./react/jsx-runtime": function() {
 		return Promise.all([__webpack_require__.e("vendors-node_modules_taro_weapp_prebundle_chunk-LNJCN3VW_js"), __webpack_require__.e("node_modules_taro_weapp_prebundle_react_jsx-runtime_js")]).then(function() { return function() { return (__webpack_require__(/*! ./node_modules/.taro/weapp/prebundle/react_jsx-runtime.js */ "./node_modules/.taro/weapp/prebundle/react_jsx-runtime.js")); }; });
 	},
@@ -74,15 +74,15 @@ var taroModuleMap = {
 	"./@tarojs/taro": function() {
 		return function() { return (__webpack_require__(/*! ./node_modules/.taro/weapp/prebundle/@tarojs_taro.js */ "./node_modules/.taro/weapp/prebundle/@tarojs_taro.js")); };
 	},
+	"./react-i18next": function() {
+		return function() { return (__webpack_require__(/*! ./node_modules/.taro/weapp/prebundle/react-i18next.js */ "./node_modules/.taro/weapp/prebundle/react-i18next.js")); };
+	},
 	"./i18next-browser-languagedetector": function() {
 		return function() { return (__webpack_require__(/*! ./node_modules/.taro/weapp/prebundle/i18next-browser-languagedetector.js */ "./node_modules/.taro/weapp/prebundle/i18next-browser-languagedetector.js")); };
 	},
 	"./i18next": function() {
 		return function() { return (__webpack_require__(/*! ./node_modules/.taro/weapp/prebundle/i18next.js */ "./node_modules/.taro/weapp/prebundle/i18next.js")); };
 	},
-	"./react-i18next": function() {
-		return function() { return (__webpack_require__(/*! ./node_modules/.taro/weapp/prebundle/react-i18next.js */ "./node_modules/.taro/weapp/prebundle/react-i18next.js")); };
-	},
 	"./react/jsx-runtime": function() {
 		return function() { return (__webpack_require__(/*! ./node_modules/.taro/weapp/prebundle/react_jsx-runtime.js */ "./node_modules/.taro/weapp/prebundle/react_jsx-runtime.js")); };
 	},

dist/project.config.json

@@ -2,7 +2,7 @@
   "miniprogramRoot": "",
   "projectname": "hola",
   "description": "",
-  "appid": "wxe1396d16d519e16b",
+  "appid": "wx6b1ab4701b77c50d",
   "setting": {
     "urlCheck": true,
     "es6": false,

dist/project.private.config.json

@@ -0,0 +1,6 @@
+{
+  "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
+  "setting": {
+    "compileHotReLoad": true
+  }
+}

src/components/Buttons.tsx

@@ -10,8 +10,8 @@ export default function Buttons(props: { title: string, type?: ButtonType, statu
     
     const myStyle = props.status == ComponentStatus.disable ? { opacity: 0.4 } : {}
     return (
-        <View style={{...myStyle,...props.style}}>
-            <Button className={props.type == ButtonType.outline ? 'outline_btn' : 'btn'} onClick={props.onClick}>{props.title}</Button>
+        <View style={{...myStyle}}>
+            <Button className={props.type == ButtonType.outline ? 'outline_btn' : 'btn'} style={{...props.style}} onClick={props.onClick}>{props.title}</Button>
         </View>
 
     )

src/components/SingleSelect.tsx

@@ -3,17 +3,24 @@ import { useState } from "react";
 import './SingleSelect.scss'
 import check from '../assets/svg/check.svg'
 
-export default function Component(props: { items: any[] }) {
+export default function Component(props: { items: any[],itemSelect?:(index: number)=>void }) {
     const [selIndex, setSelIndex] = useState(-1)
 
     function isString(variable: any): boolean {
         return typeof variable === 'string';
     }
 
+    function itemClick(index: number) {
+        setSelIndex(index)
+        if(props.itemSelect){
+            props.itemSelect(index)
+        }
+    }
+
     return (
         <View>{
             props.items.map((item, index) => {
-                return <View className={selIndex == index ? 'item item_select' : 'item'} key={index} onClick={() => setSelIndex(index)}>
+                return <View className={selIndex == index ? 'item item_select' : 'item'} key={index} onClick={() => itemClick(index)}>
                     {/* <Text>{item}</Text> */}
                     {
                         isString(item) ? <Text style={{color:'#fff'}}>{item}</Text> : item

src/features/trackTimeDuration/components/ChooseScenario.scss

@@ -0,0 +1,16 @@
+.item_row{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+}
+
+.item_txt_bg{
+    position: relative;
+    margin-left: 60px;
+}
+
+.item_txt{
+    font-size: 48px;
+    font-weight: 500;
+}

src/features/trackTimeDuration/components/ChooseScenario.tsx

@@ -1,4 +1,4 @@
-import { View } from "@tarojs/components";
+import { View, Text } from "@tarojs/components";
 import Buttons from '@components/Buttons';
 import Texts from '@components/Texts';
 import Rings from '../../../components/Rings';
@@ -6,10 +6,13 @@ import Footer from '@components/Footer';
 import SingleSelect from '../../../components/SingleSelect';
 import { ComponentStatus, TextType } from "@utils/types";
 import { useTranslation } from 'react-i18next'
+import './ChooseScenario.scss'
+import { useState } from "react";
 
 
 export default function Component() {
     const { t } = useTranslation()
+    const [selIndex,setSelIndex] = useState(0)
 
     function login() {
         // Taro.navigateTo({
@@ -18,42 +21,72 @@ export default function Component() {
     }
 
     function footerContent() {
+        var style = {}
+        switch (selIndex) {
+            case 0:
+                style = { backgroundColor: '#AAFF00' }
+                break;
+            case 1:
+                style = { backgroundColor: '#00FFFF' }
+                break;
+            case 2:
+                style = {
+                    background: 'linear-gradient(to right, #AAFF00, #00FFFF)'
+                  }
+                break;
+        }
         return <View>
-            <Buttons title='Login' onClick={login} />
+            <Buttons title='Login' onClick={login} style={{...style,width:320}}/>
         </View>
     }
 
     function items() {
         const array: any[] = []
         array.push(
-            <View>
+            <View className="item_row">
                 <Rings radius={33} strokeWidth={8} color='#AAFF00' canvasId='0' />
+                <View className="item_txt_bg">
+                    <Text className="item_txt" style={{ color: '#AAFF00' }}>{t('page.choose_scenario.fast')}</Text>
+                </View>
             </View>
         );
         array.push(
-            <View>
+            <View className="item_row">
                 <Rings radius={33} strokeWidth={8} color='#00FFFF' canvasId='1' />
+                <View className="item_txt_bg">
+                    <Text className="item_txt" style={{ color: '#00FFFF' }}>{t('page.choose_scenario.sleep')}</Text>
+                </View>
             </View>
         )
         array.push(
-            <View style={{position:'relative',zIndex:1}}>
-                <Rings radius={33} strokeWidth={8} color='#AAFF00' canvasId='3' />
-                <View style={{display:'flex',position:'absolute',left:0,right:0,top:0,bottom:0,alignItems:'center',justifyContent:'center'}}>
-                    <Rings radius={23} strokeWidth={6} color='#00FFFF' canvasId='4' />
+            <View className="item_row">
+                <View style={{ position: 'relative', zIndex: 1 }}>
+                    <Rings radius={33} strokeWidth={8} color='#AAFF00' canvasId='3' />
+                    <View style={{ display: 'flex', position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' }}>
+                        <Rings radius={23} strokeWidth={6} color='#00FFFF' canvasId='4' />
+                    </View>
+                </View>
+                <View className="item_txt_bg">
+                    <Text className="item_txt" style={{ color: '#00FFFF' }}>{t('page.choose_scenario.fast_sleep')}</Text>
                 </View>
             </View>
         )
         return array;
     }
 
+    function handleItemSelect(index: number) {
+        console.log('handleItemSelect', index)
+        setSelIndex(index)
+    }
+
     return <View className="container">
         <Texts text={t('page.choose_scenario.title')} type={TextType.primary}></Texts>
         <Texts text={t('page.choose_scenario.sub_title')} type={TextType.secondary}></Texts>
         <View style={{ height: 20 }} />
-        <View  style={{position:'relative',zIndex:1}}>
-        <SingleSelect items={items()} />
+        <View style={{ position: 'relative', zIndex: 1 }}>
+            <SingleSelect items={items()} itemSelect={handleItemSelect}/>
         </View>
-        
+
         <Footer child={footerContent()} />
     </View>;
 }